@postnord/pn-marketweb-components 2.0.3-beta3 → 2.0.4

package/umd/modules/@postnord/web-components/cjs/index.cjs.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/umd/modules/@postnord/web-components/cjs/loader.cjs.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-cbdc5de1.js');
+
+/*
+ Stencil Client Patch Esm v2.12.1 | MIT Licensed | https://stenciljs.com
+ */
+const patchEsm = () => {
+    return index.promiseResolve();
+};
+
+const defineCustomElements = (win, options) => {
+  if (typeof window === 'undefined') return Promise.resolve();
+  return patchEsm().then(() => {
+  return index.bootstrapLazy([["pn-ocr-search.cjs",[[0,"pn-ocr-search",{"language":[1],"loading":[32],"error":[32],"ocrNumber":[32],"searchSuccess":[32],"invalidOcrNumber":[32]}]]],["pn-zipcode-search.cjs",[[0,"pn-zipcode-search",{"marketwebLanguage":[1,"marketweb-language"],"language":[32],"loading":[32],"error":[32],"errorMessage":[32],"showResult":[32],"zipCodeSearchResult":[32]}]]],["pn-file-upload.cjs",[[4,"pn-file-upload",{"disabled":[4],"showSpinner":[4,"show-spinner"],"accept":[1],"maxSize":[1,"max-size"],"limit":[2],"multiple":[1028],"triggerElements":[32],"renders":[32],"startUpload":[64],"clearUpload":[64],"removeFile":[64],"updateFile":[64]}]]],["pn-select.cjs",[[4,"pn-select",{"searchable":[4],"label":[1],"placeholder":[1],"checkbox":[4],"checkboxid":[1],"checked":[1028],"indeterminate":[1028],"error":[1],"invalid":[4],"value":[1],"internalValue":[32],"open":[32],"upwards":[32],"loaded":[32]},[[0,"change","changeHandler"],[0,"selectOption","selectOptionHandler"]]]]],["pn-date-picker.cjs",[[0,"pn-date-picker",{"language":[1],"disabled":[4],"emitErrors":[4,"emit-errors"],"label":[1],"min":[1],"max":[1],"invalid":[4],"disableWeekends":[4,"disable-weekends"],"disableDays":[1,"disable-days"],"disableInput":[4,"disable-input"],"startOfWeek":[2,"start-of-week"],"dispatchChangeOnBlur":[4,"dispatch-change-on-blur"],"position":[1],"value":[1025]},[[0,"daychange","dateChanged"]]]]],["pn-footer.cjs",[[0,"pn-footer",{"market":[32],"language":[32],"isLoggedIn":[32],"isBusinessUser":[32]}]]],["pn-icon-grid.cjs",[[0,"pn-icon-grid",{"small":[4],"color":[1],"activeSymbol":[32]}]]],["pn-illustration-grid.cjs",[[0,"pn-illustration-grid",{"size":[1],"color":[1],"activeIllustration":[32]}]]],["pn-input.cjs",[[0,"pn-input",{"disabled":[4],"error":[1],"invalid":[4],"helpertext":[1],"label":[1],"placeholder":[1],"inputid":[1],"name":[1],"required":[4],"type":[1025],"autocomplete":[1],"valid":[4],"value":[1],"maxlength":[1],"showText":[32]}]]],["pn-modal.cjs",[[4,"pn-modal",{"open":[1028],"focusableEls":[32]}]]],["pn-nav-dropdown.cjs",[[4,"pn-nav-dropdown",{"label":[1],"icon":[1],"open":[32],"position":[32],"right":[32]}]]],["pn-segment.cjs",[[4,"pn-segment",{"segmentid":[1],"name":[1],"value":[1],"selected":[4],"icon":[1]}]]],["pn-tile.cjs",[[4,"pn-tile",{"label":[1],"url":[1],"target":[1],"rel":[1],"illustration":[1025],"simple":[32],"checkCardSize":[32],"longpress":[32],"timer":[32]}]]],["pn-toast.cjs",[[4,"pn-toast",{"appearance":[1],"icon":[1],"closable":[4],"temporary":[4],"manualDuration":[2,"manual-duration"],"hidden":[1028],"timeout":[32]}]]],["pn-toggle-switch.cjs",[[0,"pn-toggle-switch",{"checked":[1028],"disabled":[4],"indeterminate":[4],"toggleid":[1],"name":[1]}]]],["pn-tooltip.cjs",[[4,"pn-tooltip",{"warning":[4],"color":[1025],"downwards":[32],"open":[32],"deltaX":[32]}]]],["pn-accordion.cjs",[[4,"pn-accordion",{"accordionRows":[32]},[[0,"togglerow","toggleHandler"]]]]],["pn-accordion-row.cjs",[[4,"pn-accordion-row",{"label":[1025]}]]],["pn-choice-chip.cjs",[[4,"pn-choice-chip",{"value":[520],"name":[1],"choiceid":[1],"disabled":[4],"checked":[4],"indeterminate":[1028]},[[0,"change","handlechange"]]]]],["pn-color.cjs",[[0,"pn-color",{"name":[1],"defaultColor":[1,"default-color"],"palette":[16]}]]],["pn-colors.cjs",[[0,"pn-colors"]]],["pn-progress-indicator.cjs",[[4,"pn-progress-indicator",{"activeStep":[1026,"active-step"]},[[0,"setactivestep","setActiveStepHandler"]]]]],["pn-progress-indicator-step.cjs",[[4,"pn-progress-indicator-step",{"activeStep":[2,"active-step"],"index":[2],"name":[1],"checked":[4],"active":[1],"activated":[32],"done":[32]}]]],["pn-radio-button.cjs",[[0,"pn-radio-button",{"value":[520],"name":[1],"radioid":[1],"disabled":[4],"checked":[4]}]]],["pn-range-date-picker.cjs",[[0,"pn-range-date-picker",{"startDate":[1040],"currentDate":[1040],"endDate":[1040],"single":[4],"year":[1026],"currentState":[32],"week":[32],"months":[32],"machine":[32]},[[0,"dateselection","dateSelectionHandler"]]]]],["pn-segmented-control.cjs",[[4,"pn-segmented-control",{"name":[1],"value":[1025],"currentSelection":[32],"showScrollArrows":[32],"showLeftArrow":[32],"showRightArrow":[32]},[[0,"change","changeHandler"],[9,"resize","handleResize"]]]]],["pn-tab.cjs",[[4,"pn-tab",{"activeTab":[1,"active-tab"],"label":[1],"value":[1]}]]],["pn-table.cjs",[[4,"pn-table",{"disabled":[4],"bordered":[4],"striped":[4]}]]],["pn-tablist.cjs",[[4,"pn-tablist",{"value":[1025],"stackedicons":[4],"tabElement":[32],"showScrollArrows":[32],"scrollArrowClasses":[32]},[[0,"setactivetab","setActiveTabHandler"],[9,"resize","handleResize"]]]]],["pn-virtual-agent.cjs",[[0,"pn-virtual-agent",{"parcelid":[1],"areaid":[2],"show":[4],"status":[32],"instanceActive":[32]}]]],["pn-calendar.cjs",[[0,"pn-calendar",{"language":[1],"min":[1],"max":[1],"startOfWeek":[2,"start-of-week"],"value":[1025],"disableWeekends":[4,"disable-weekends"],"disableDays":[1,"disable-days"],"minActiveDate":[1,"min-active-date"],"maxActiveDate":[1,"max-active-date"],"defaultDate":[1,"default-date"],"disableMonthsView":[4,"disable-months-view"],"monthView":[4,"month-view"]}]]],["pn-option.cjs",[[4,"pn-option",{"value":[1],"selected":[1540],"selectHasLoaded":[4,"select-has-loaded"],"parentValue":[8,"parent-value"],"checked":[1028],"checkbox":[4],"index":[1]},[[0,"change","changeHandler"]]]]],["pn-spinner.cjs",[[0,"pn-spinner",{"light":[4],"size":[1]}]]],["pn-progress-bar.cjs",[[0,"pn-progress-bar",{"progress":[2],"size":[1],"color":[1],"width":[1],"label":[1],"showSpinner":[4,"show-spinner"],"showPercentage":[4,"show-percentage"]}]]],["pn-illustration.cjs",[[0,"pn-illustration",{"illustration":[1]}]]],["pn-checkbox.cjs",[[0,"pn-checkbox",{"value":[520],"name":[1],"checkboxid":[1],"disabled":[4],"checked":[4],"indeterminate":[1028]},[[0,"change","handlechange"]]]]],["pn-icon.cjs",[[0,"pn-icon",{"symbol":[1],"small":[4],"color":[1]}]]],["pn-button_2.cjs",[[0,"pn-search-field",{"disabled":[4],"placeholder":[1],"inputid":[1],"name":[1],"autocomplete":[1],"value":[1],"label":[1],"loading":[4],"button":[1],"light":[4]},[[0,"input","inputHandler"]]],[4,"pn-button",{"small":[4],"appearance":[1],"variant":[1],"loading":[516],"leftIcon":[4,"left-icon"],"icon":[1],"type":[1],"iconOnly":[4,"icon-only"],"ariaLabel":[1,"aria-label"],"ariaLabelledby":[1,"aria-labelledby"],"ariaControls":[1,"aria-controls"],"ariaPressed":[1,"aria-pressed"],"href":[1],"rel":[1],"target":[1],"download":[4],"tooltipOpen":[32],"tooltipDownwards":[32]}]]]], options);
+  });
+};
+
+exports.defineCustomElements = defineCustomElements;

package/umd/modules/@postnord/web-components/cjs/pn-accordion-row.cjs.entry.js

@@ -0,0 +1,50 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-cbdc5de1.js');
+
+const pnAccordionRowCss = "pn-accordion-row{position:relative;color:black;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-transition:-webkit-transform 0.3s cubic-bezier(0.7, 0, 0.3, 1);transition:-webkit-transform 0.3s cubic-bezier(0.7, 0, 0.3, 1);transition:transform 0.3s cubic-bezier(0.7, 0, 0.3, 1);transition:transform 0.3s cubic-bezier(0.7, 0, 0.3, 1), -webkit-transform 0.3s cubic-bezier(0.7, 0, 0.3, 1)}pn-accordion-row+pn-accordion-row{border-top:0.1rem solid #D3CECB;margin-top:0.4rem}pn-accordion-row[data-flipping]{-webkit-transform:translateY(calc(-1px * var(--dy)));transform:translateY(calc(-1px * var(--dy)));-webkit-transition:none;transition:none}pn-accordion-row .accordion-title{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;z-index:0;width:100%;font-weight:400;padding:1em;-webkit-transition:background 0.2s, -webkit-box-shadow 0.1s cubic-bezier(0.7, 0, 0.3, 1);transition:background 0.2s, -webkit-box-shadow 0.1s cubic-bezier(0.7, 0, 0.3, 1);transition:background 0.2s, box-shadow 0.1s cubic-bezier(0.7, 0, 0.3, 1);transition:background 0.2s, box-shadow 0.1s cubic-bezier(0.7, 0, 0.3, 1), -webkit-box-shadow 0.1s cubic-bezier(0.7, 0, 0.3, 1);border-radius:0.8rem;overflow:hidden;position:relative;background:#FFFFFF;border:none;outline:none;cursor:pointer;font-size:1em;}pn-accordion-row .accordion-title:hover{background:#E0F8FF}pn-accordion-row .accordion-title:focus{-webkit-box-shadow:0 0 0 0.2rem white, 0 0 0 0.4rem #005D92;box-shadow:0 0 0 0.2rem white, 0 0 0 0.4rem #005D92}pn-accordion-row .accordion-title>svg{margin-left:auto;-webkit-transition:-webkit-transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.25s;transition:-webkit-transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.25s;transition:transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.25s;transition:transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.25s, -webkit-transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.25s}pn-accordion-row .accordion-title>svg path{fill:#005D92}pn-accordion-row .accordion-title .pn-ripple{-webkit-animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1) forwards;animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1) forwards;position:absolute;border-radius:50%;background:#005D92;-webkit-transform:translate(-50%, -50%) scale(0);transform:translate(-50%, -50%) scale(0);opacity:0.05;pointer-events:none}@-webkit-keyframes ripple{to{-webkit-transform:translate(-50%, -50%) scale(1);transform:translate(-50%, -50%) scale(1);opacity:0}}@keyframes ripple{to{-webkit-transform:translate(-50%, -50%) scale(1);transform:translate(-50%, -50%) scale(1);opacity:0}}pn-accordion-row .accordion-content{z-index:2;top:0;left:0;width:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}pn-accordion-row .accordion-content .content{position:absolute;left:0;right:0;width:100%;top:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;pointer-events:none;opacity:0;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;padding:1em}pn-accordion-row[data-state=open] .accordion-content .content{position:relative;pointer-events:unset;opacity:1;-webkit-transition-delay:0.2s;transition-delay:0.2s}pn-accordion-row[data-state=open] .accordion-title svg{-webkit-transform:rotate(-180deg);transform:rotate(-180deg);-webkit-transition-delay:0s;transition-delay:0s}";
+
+let PnaccordionItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.togglerow = index.createEvent(this, "togglerow", 7);
+    /** The label/title of the accordion row, you can also pass a slot with the name "label" if you want to put custom content in there */
+    this.label = null;
+    this.rippleContainer = null;
+  }
+  componentWillLoad() {
+    const slottedLabel = this.hostElement.querySelector('[slot="label"]');
+    this.label = slottedLabel ? null : this.label;
+  }
+  componentDidLoad() {
+    this.rippleContainer = this.hostElement.querySelector('.accordion-title');
+  }
+  toggleHandler() {
+    this.togglerow.emit(this.hostElement);
+  }
+  clickHandler(e) {
+    this.togglerow.emit(this.hostElement);
+    const elRect = this.rippleContainer.getBoundingClientRect();
+    const elLeft = elRect.left;
+    const elTop = elRect.top;
+    const rippleEl = document.createElement('div');
+    const elSize = elRect.width > elRect.height ? elRect.width : elRect.height;
+    rippleEl.classList.add('pn-ripple');
+    this.rippleContainer.appendChild(rippleEl);
+    rippleEl.style.height = `${elSize * 2}px`;
+    rippleEl.style.width = `${elSize * 2}px`;
+    rippleEl.style.left = e.clientX > 0 ? `${e.clientX - elLeft}px` : `50%`;
+    rippleEl.style.top = e.clientY > 0 ? `${e.clientY - elTop}px` : `50%`;
+    setTimeout(() => rippleEl.remove(), 400);
+  }
+  /*---------------------------------------/UTILS-------------------------------------------*/
+  render() {
+    return (index.h(index.Host, { "data-state": "collapsed" }, index.h("div", { class: "accordion-content" }, index.h("button", { type: "button", class: "accordion-title", onClick: (e) => this.clickHandler(e) }, this.label ? this.label : '', index.h("slot", { name: "label" }), index.h("svg", { width: "18", height: "10", viewBox: "0 0 18 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M9.70711 9.70711C9.31658 10.0976 8.68342 10.0976 8.29289 9.70711L0.292892 1.70711C-0.0976315 1.31658 -0.0976315 0.683417 0.292892 0.292893C0.683418 -0.0976315 1.31658 -0.0976315 1.70711 0.292893L9 7.58579L16.2929 0.292893C16.6834 -0.0976315 17.3166 -0.0976315 17.7071 0.292893C18.0976 0.683417 18.0976 1.31658 17.7071 1.70711L9.70711 9.70711Z", fill: "#232228" }))), index.h("div", { class: "content" }, index.h("slot", null)))));
+  }
+  get hostElement() { return index.getElement(this); }
+};
+PnaccordionItem.style = pnAccordionRowCss;
+
+exports.pn_accordion_row = PnaccordionItem;

package/umd/modules/@postnord/web-components/cjs/pn-accordion.cjs.entry.js

@@ -0,0 +1,60 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-cbdc5de1.js');
+
+const pnAccordionCss = "pn-accordion{display:block;position:relative}pn-accordion .accordion-bg{position:absolute;left:0;right:0;top:0;bottom:0;-webkit-transform-origin:top left;transform-origin:top left;-webkit-transition:-webkit-transform 0.3s cubic-bezier(0.7, 0, 0.3, 1);transition:-webkit-transform 0.3s cubic-bezier(0.7, 0, 0.3, 1);transition:transform 0.3s cubic-bezier(0.7, 0, 0.3, 1);transition:transform 0.3s cubic-bezier(0.7, 0, 0.3, 1), -webkit-transform 0.3s cubic-bezier(0.7, 0, 0.3, 1);pointer-events:none}[data-flipping]>pn-accordion .accordion-bg{-webkit-transition:none;transition:none;-webkit-transform:scaleY(calc(1 / var(--dh)));transform:scaleY(calc(1 / var(--dh)))}";
+
+let Pnaccordion = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.accordionRows = Array.from(document.querySelectorAll("pn-accordion-row"));
+  }
+  componentDidLoad() {
+    if (this.mo)
+      this.mo.disconnect();
+    const mo = this.mo = new MutationObserver(() => {
+      index.forceUpdate(this.hostElement);
+    });
+    mo.observe(this.hostElement, { childList: true });
+  }
+  toggleHandler({ detail }) {
+    const arr = this.accordionRows.slice(this.accordionRows.indexOf(detail) + 1);
+    this.animate(() => this.toggleState(detail), [this.hostElement, ...arr]);
+  }
+  toggleState(el) {
+    el.dataset.state === "collapsed" ? el.dataset.state = "open" : el.dataset.state = "collapsed";
+  }
+  getRect(el) {
+    return el.getBoundingClientRect();
+  }
+  animate(layoutChange, firstEls, getLastEls = () => firstEls) {
+    const firstElsRects = Array.from(firstEls).map((el) => [el, this.getRect(el)]);
+    requestAnimationFrame(() => {
+      layoutChange();
+      const lastElsRects = Array.from(getLastEls()).map((el) => [el, this.getRect(el)]);
+      //@ts-ignore
+      firstElsRects.forEach(([firstEl, firstRect], i) => {
+        let [lastEl, lastRect] = lastElsRects[i];
+        const dx = lastRect.x - firstRect.x;
+        const dy = lastRect.y - firstRect.y;
+        const dw = lastRect.width / firstRect.width;
+        const dh = lastRect.height / firstRect.height;
+        lastEl.dataset.flipping = true;
+        lastEl.style.setProperty("--dx", dx);
+        lastEl.style.setProperty("--dy", dy);
+        lastEl.style.setProperty("--dw", dw);
+        lastEl.style.setProperty("--dh", dh);
+        requestAnimationFrame(() => delete lastEl.dataset.flipping);
+      });
+    });
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "accordion-bg" }), index.h("slot", null)));
+  }
+  get hostElement() { return index.getElement(this); }
+};
+Pnaccordion.style = pnAccordionCss;
+
+exports.pn_accordion = Pnaccordion;

package/umd/modules/@postnord/web-components/cjs/pn-button_2.cjs.entry.js

@@ -0,0 +1,247 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-cbdc5de1.js');
+
+const pnButtonCss = "pn-button{display:inline-block}pn-button button,pn-button a{color:#fff;cursor:pointer;padding:0.75em 1.2em;width:100%;border:none;border-radius:3em;outline:none;position:relative;font-size:1em;min-height:3em;min-width:5.5em;font-weight:500;background:transparent;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-transition:color 0.3s;transition:color 0.3s;-webkit-tap-highlight-color:transparent;}pn-button button pn-icon,pn-button a pn-icon{-ms-flex-negative:0;flex-shrink:0;margin:0 0 0 0.5em}pn-button button pn-icon svg path,pn-button a pn-icon svg path{fill:#fff;-webkit-transition:fill 0.3s;transition:fill 0.3s}pn-button button .pn-button-content,pn-button a .pn-button-content{z-index:2;-webkit-transition:opacity 0.1s, -webkit-transform 0.2s;transition:opacity 0.1s, -webkit-transform 0.2s;transition:opacity 0.1s, transform 0.2s;transition:opacity 0.1s, transform 0.2s, -webkit-transform 0.2s;-webkit-transition-delay:0.2s;transition-delay:0.2s;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}pn-button button .pn-button-bg,pn-button a .pn-button-bg{position:absolute;width:100%;height:100%;top:0;left:50%;border-radius:3em;border:0.1rem solid transparent;background:#005D92;-webkit-transform:translateX(-50%);transform:translateX(-50%);-webkit-transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, -webkit-box-shadow 0.1s;transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, -webkit-box-shadow 0.1s;transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, box-shadow 0.1s;transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, box-shadow 0.1s, -webkit-box-shadow 0.1s;overflow:hidden}pn-button button .pn-button-bg::after,pn-button a .pn-button-bg::after{content:\"\";position:absolute;will-change:transform;-webkit-transition:-webkit-transform 0.2s cubic-bezier(0.7, 0, 0.3, 1);transition:-webkit-transform 0.2s cubic-bezier(0.7, 0, 0.3, 1);transition:transform 0.2s cubic-bezier(0.7, 0, 0.3, 1);transition:transform 0.2s cubic-bezier(0.7, 0, 0.3, 1), -webkit-transform 0.2s cubic-bezier(0.7, 0, 0.3, 1);width:100%;height:100%;background:#0D234B;border-radius:inherit;left:0;-webkit-transform:translateX(-103%);transform:translateX(-103%);opacity:0.5}pn-button button.pn-button-light,pn-button a.pn-button-light{color:#005D92}pn-button button.pn-button-light pn-icon svg path,pn-button a.pn-button-light pn-icon svg path{fill:#005D92}pn-button button.pn-button-light pn-spinner .circle,pn-button a.pn-button-light pn-spinner .circle{stroke:#005D92}pn-button button.pn-button-light pn-spinner .dot,pn-button a.pn-button-light pn-spinner .dot{fill:#005D92}pn-button button.pn-button-light .pn-button-bg,pn-button a.pn-button-light .pn-button-bg{border:0.1rem solid #005D92;background:#fff}pn-button button.pn-button-light .pn-button-bg:after,pn-button a.pn-button-light .pn-button-bg:after{background:#E0F8FF;opacity:1}pn-button button.pn-button-light .pn-button-bg .pn-ripple,pn-button a.pn-button-light .pn-button-bg .pn-ripple{background:#005D92}pn-button button.pn-button-warning,pn-button a.pn-button-warning{color:#A70707}pn-button button.pn-button-warning pn-icon svg path,pn-button a.pn-button-warning pn-icon svg path{fill:#A70707}pn-button button.pn-button-warning pn-spinner .circle,pn-button a.pn-button-warning pn-spinner .circle{stroke:#A70707}pn-button button.pn-button-warning pn-spinner .dot,pn-button a.pn-button-warning pn-spinner .dot{fill:#A70707}pn-button button.pn-button-warning .pn-button-bg,pn-button a.pn-button-warning .pn-button-bg{border:0.1rem solid #A70707;background:#FDEFEE}pn-button button.pn-button-warning .pn-button-bg:after,pn-button a.pn-button-warning .pn-button-bg:after{background:#A70707;opacity:1}pn-button button.pn-button-variation-borderless .pn-button-bg,pn-button a.pn-button-variation-borderless .pn-button-bg{border:0.1rem solid transparent;background:transparent}pn-button button.pn-button-variation-borderless.pn-button-dark .pn-button-bg:after,pn-button a.pn-button-variation-borderless.pn-button-dark .pn-button-bg:after{background:white;opacity:0.1}pn-button button.pn-button-variation-outlined .pn-button-bg,pn-button a.pn-button-variation-outlined .pn-button-bg{background:transparent}pn-button button.pn-button-variation-outlined.pn-button-dark .pn-button-bg,pn-button a.pn-button-variation-outlined.pn-button-dark .pn-button-bg{border-color:#FFFFFF}pn-button button.pn-button-variation-outlined.pn-button-dark .pn-button-bg::after,pn-button a.pn-button-variation-outlined.pn-button-dark .pn-button-bg::after{background:white;opacity:0.1}pn-button button.pn-button-variation-outlined.pn-button-light .pn-button-bg::after,pn-button a.pn-button-variation-outlined.pn-button-light .pn-button-bg::after{background:#00A0D6;opacity:0.1}pn-button button.pn-button-left-icon .pn-button-content,pn-button a.pn-button-left-icon .pn-button-content{-ms-flex-direction:row-reverse;flex-direction:row-reverse}pn-button button.pn-button-left-icon .pn-button-content pn-icon,pn-button a.pn-button-left-icon .pn-button-content pn-icon{margin:0 0.5em 0 0}pn-button button.icon-only,pn-button a.icon-only{width:3em;min-width:0}pn-button button.icon-only pn-icon,pn-button a.icon-only pn-icon{margin:0}pn-button button.icon-only.pn-button-small,pn-button a.icon-only.pn-button-small{width:2.286em;min-width:0;padding:0}pn-button button.pn-button-small,pn-button a.pn-button-small{font-size:1.4rem;padding:0.5em 1em;font-weight:normal;min-height:2.286em;min-width:none}a:focus>pn-button button .pn-button-bg,pn-button button:focus .pn-button-bg,pn-button a:focus .pn-button-bg{-webkit-box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92}a:focus>pn-button button .pn-button-bg:after,pn-button button:hover .pn-button-bg:after,pn-button button:focus .pn-button-bg:after,pn-button a:hover .pn-button-bg:after,pn-button a:focus .pn-button-bg:after{-webkit-transform:translateX(0);transform:translateX(0)}a:focus>pn-button button.pn-button-warning,pn-button button.pn-button-warning:hover,pn-button a.pn-button-warning:hover,pn-button button.pn-button-warning:focus,pn-button a.pn-button-warning:focus{color:#FFF}a:focus>pn-button button.pn-button-warning pn-icon svg path,pn-button button.pn-button-warning:hover pn-icon svg path,pn-button a.pn-button-warning:hover pn-icon svg path,pn-button button.pn-button-warning:focus pn-icon svg path,pn-button a.pn-button-warning:focus pn-icon svg path{fill:#FFF}a:focus>pn-button button.pn-button-warning pn-spinner .circle,pn-button button.pn-button-warning:hover pn-spinner .circle,pn-button a.pn-button-warning:hover pn-spinner .circle,pn-button button.pn-button-warning:focus pn-spinner .circle,pn-button a.pn-button-warning:focus pn-spinner .circle{stroke:#FFF}a:focus>pn-button button.pn-button-warning pn-spinner .dot,pn-button button.pn-button-warning:hover pn-spinner .dot,pn-button a.pn-button-warning:hover pn-spinner .dot,pn-button button.pn-button-warning:focus pn-spinner .dot,pn-button a.pn-button-warning:focus pn-spinner .dot{fill:#FFF}a:focus>pn-button button.pn-button-warning .pn-button-bg,pn-button button.pn-button-warning:focus .pn-button-bg,pn-button a.pn-button-warning:focus .pn-button-bg{-webkit-box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #A70707;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #A70707}pn-button .pn-ripple{-webkit-animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background:#fff;-webkit-transform:translate(-50%, -50%) scale(0);transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@-webkit-keyframes ripple{to{-webkit-transform:translate(-50%, -50%) scale(1);transform:translate(-50%, -50%) scale(1);opacity:0}}@keyframes ripple{to{-webkit-transform:translate(-50%, -50%) scale(1);transform:translate(-50%, -50%) scale(1);opacity:0}}pn-button pn-spinner{position:absolute;-webkit-transform:scale(0);transform:scale(0)}pn-button[data-loading] pn-spinner{-webkit-transform:scale(1);transform:scale(1);-webkit-transition:-webkit-transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.3s;transition:-webkit-transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.3s;transition:transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.3s;transition:transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.3s, -webkit-transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.3s}pn-button[data-loading] .pn-button-content{opacity:0;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transform:translateY(100%);transform:translateY(100%)}pn-button[data-loading] .pn-button-bg{width:3em}pn-button[data-loading] button.pn-button-small .pn-button-bg,pn-button[data-loading] a.pn-button-small .pn-button-bg{width:2.286em}pn-button button .button-tooltip,pn-button a .button-tooltip{position:absolute;bottom:calc(100% + 0.75em);left:50%;background:#FFFFFF;padding:1em;border-radius:0.8rem;-webkit-box-shadow:0 1.2px 3.6px rgba(0, 0, 0, 0.1), 0 6.4px 14.4px rgba(0, 0, 0, 0.13);box-shadow:0 1.2px 3.6px rgba(0, 0, 0, 0.1), 0 6.4px 14.4px rgba(0, 0, 0, 0.13);z-index:1;max-width:min(95vw, 40em);-webkit-transition:-webkit-transform 0.15s cubic-bezier(0.7, 0, 0.3, 1);transition:-webkit-transform 0.15s cubic-bezier(0.7, 0, 0.3, 1);transition:transform 0.15s cubic-bezier(0.7, 0, 0.3, 1);transition:transform 0.15s cubic-bezier(0.7, 0, 0.3, 1), -webkit-transform 0.15s cubic-bezier(0.7, 0, 0.3, 1);-webkit-transition-delay:0s;transition-delay:0s;-webkit-transform:scale(0) translateX(-50%);transform:scale(0) translateX(-50%);-webkit-transform-origin:bottom left;transform-origin:bottom left;width:-webkit-max-content;width:-moz-max-content;width:max-content;color:#000}pn-button button:before,pn-button a:before{content:\"\";width:0;height:0;border-left:0.75em solid transparent;border-right:0.75em solid transparent;border-top:0.75em solid #FFFFFF;-webkit-filter:drop-shadow(0 0.3rem 0.1rem rgba(0, 0, 0, 0.075));filter:drop-shadow(0 0.3rem 0.1rem rgba(0, 0, 0, 0.075));-webkit-transform:scale(0) translateX(-50%);transform:scale(0) translateX(-50%);bottom:102%;left:50%;position:absolute;z-index:2;-webkit-transition:-webkit-transform 0.15s linear;transition:-webkit-transform 0.15s linear;transition:transform 0.15s linear;transition:transform 0.15s linear, -webkit-transform 0.15s linear;-webkit-transition-delay:0.15s;transition-delay:0.15s;-webkit-transform-origin:bottom left;transform-origin:bottom left;pointer-events:none}pn-button button[data-tooltip-open] .button-tooltip,pn-button a[data-tooltip-open] .button-tooltip{-webkit-transition-delay:0.1s;transition-delay:0.1s}pn-button button[data-tooltip-open]:before,pn-button a[data-tooltip-open]:before{-webkit-transform:scale(1) translateX(-50%);transform:scale(1) translateX(-50%);-webkit-transition-delay:0s;transition-delay:0s;pointer-events:auto}pn-button button.button-tooltip-downwards .button-tooltip,pn-button a.button-tooltip-downwards .button-tooltip{bottom:unset;top:calc(100% + 0.75em);-webkit-transform-origin:top left;transform-origin:top left}pn-button button.button-tooltip-downwards:before,pn-button a.button-tooltip-downwards:before{top:102%;-webkit-transform-origin:top left;transform-origin:top left;-webkit-filter:drop-shadow(0 -0.3rem 0.1rem rgba(0, 0, 0, 0.02));filter:drop-shadow(0 -0.3rem 0.1rem rgba(0, 0, 0, 0.02));border-top:none;border-bottom:0.75em solid #FFFFFF}pn-button a{text-decoration:none}pn-button a:hover{color:#FFFFFF}pn-button a:hover.pn-button-light{color:#005D92}";
+
+let Pnbutton = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** small, bool */
+    this.small = false;
+    /** Button type, dark(blue background), light(white background), warning(destructive actions) */
+    this.appearance = 'primary ';
+    /** Altering the button style, options are: 'outlined' (bordered button with no background) or 'borderless' (borderless button with no background, mostly used for links) */
+    this.variant = '';
+    /** Loading indicator */
+    this.loading = false;
+    /** Icon on the left side instead of on the right */
+    this.leftIcon = false;
+    this.icon = null;
+    this.type = 'button';
+    /** If you're using a button with only an icon, button text is still REQUIRED for the tooltip */
+    this.iconOnly = false;
+    this.ariaLabel = null;
+    this.ariaLabelledby = null;
+    this.ariaControls = null;
+    this.ariaPressed = null;
+    /** Pass an href to make the button into link (a-tag) */
+    this.href = null;
+    this.rel = null;
+    this.target = null;
+    this.download = null;
+    /*---------------------------------------TOOLTIP LOGIC-------------------------------------------*/
+    this.tooltipOpen = false;
+    this.ripple = function (e, el) {
+      const elRect = el.getBoundingClientRect();
+      const elLeft = elRect.left;
+      const elTop = elRect.top;
+      const rippleEl = document.createElement('div');
+      const elSize = elRect.width > elRect.height ? elRect.width : elRect.height;
+      rippleEl.classList.add('pn-ripple');
+      el.querySelector('.pn-button-bg').appendChild(rippleEl);
+      rippleEl.style.height = `${elSize * 2}px`;
+      rippleEl.style.width = `${elSize * 2}px`;
+      rippleEl.style.left = e.clientX > 0 ? `${e.clientX - elLeft}px` : `50%`;
+      rippleEl.style.top = e.clientY > 0 ? `${e.clientY - elTop}px` : `50%`;
+      setTimeout(() => rippleEl.remove(), 400);
+    };
+  }
+  componentDidLoad() {
+    this.checkIfLink();
+    if (this.iconOnly)
+      this.initTooltip();
+  }
+  openHandler() {
+    if (this.tooltipOpen) {
+      this.checkTooltipPosition();
+      return;
+    }
+    this.setTooltipOffset();
+  }
+  initTooltip() {
+    this.tooltipEl = this.hostElement.querySelector('.button-tooltip');
+    const buttonEl = this.hostElement.querySelector('.pn-button');
+    const tooltipAnchor = this.linkEl ? this.linkEl : buttonEl;
+    const openEvents = ['mouseover', 'focus'];
+    const closeEvents = ['mouseleave', 'blur'];
+    const eventListeners = [...openEvents, ...closeEvents];
+    eventListeners.forEach((e) => {
+      tooltipAnchor.addEventListener(e, (event) => {
+        // Should open?
+        if (openEvents.includes(event.type)) {
+          this.tooltipOpen = true;
+          return;
+        }
+        // Should close?
+        if (closeEvents.includes(event.type)) {
+          this.tooltipOpen = false;
+        }
+      });
+    });
+  }
+  setTooltipOffset() {
+    this.tooltipEl.style.transform = `scale(${Number(this.tooltipOpen)}) translateX(-50%) translateX(${this.tooltipDx}px)`;
+  }
+  checkTooltipPosition() {
+    this.tooltipEl.style.transition = 'none';
+    this.tooltipEl.style.transform = 'scale(1) translateX(-50%)';
+    this.tooltipDownwards = false;
+    requestAnimationFrame(() => {
+      const { x, y, right } = this.tooltipEl.getBoundingClientRect();
+      const extraMargin = 8;
+      this.tooltipDx = '0';
+      this.tooltipDownwards = y < 0;
+      this.tooltipEl.style.transform = '';
+      if (x < 0)
+        this.tooltipDx = `${x * -1 + extraMargin}`;
+      if (right > window.innerWidth)
+        this.tooltipDx = `${window.innerWidth - right - extraMargin}`;
+      requestAnimationFrame(() => {
+        this.tooltipEl.style.transition = '';
+        this.setTooltipOffset();
+      });
+    });
+  }
+  /*---------------------------------------/TOOLTIP LOGIC-------------------------------------------*/
+  checkIfLink() {
+    var _a;
+    if (((_a = this.hostElement.parentElement) === null || _a === void 0 ? void 0 : _a.nodeName) === 'A') {
+      this.linkEl = this.hostElement.parentElement;
+      this.hostElement.parentElement.style.setProperty('outline', 'none');
+      this.hostElement.querySelector('button').setAttribute('tabindex', '-1');
+    }
+  }
+  getClassNames() {
+    let classNames = 'pn-button ';
+    const dark = ['primary', 'dark'];
+    const light = ['secondary', 'light'];
+    const variations = ['borderless', 'outlined'];
+    if (this.small)
+      classNames += 'pn-button-small ';
+    if (this.leftIcon)
+      classNames += 'pn-button-left-icon ';
+    if (variations.includes(this.variant))
+      classNames += `pn-button-variation-${this.variant} `;
+    if (this.iconOnly)
+      classNames += 'icon-only ';
+    if (this.tooltipDownwards)
+      classNames += 'button-tooltip-downwards ';
+    if (dark.includes(this.appearance)) {
+      classNames += 'pn-button-dark ';
+    }
+    else if (light.includes(this.appearance)) {
+      classNames += 'pn-button-light ';
+    }
+    else if (this.appearance === 'warning') {
+      classNames += 'pn-button-warning ';
+    }
+    else {
+      classNames += 'pn-button-dark ';
+    }
+    // Loading state
+    if (this.loading) {
+      this.hostElement.dataset.loading = "true";
+    }
+    else {
+      if (this.hostElement.dataset.loading)
+        delete this.hostElement.dataset.loading;
+    }
+    return classNames;
+  }
+  getAttributes() {
+    var _a, _b;
+    const btnAttrs = {
+      type: this.type
+    };
+    const linkAttrs = {
+      href: this.href,
+      rel: (!this.rel && this.target === "_blank") ? 'noopener' : this.rel,
+      target: (_a = this.target) !== null && _a !== void 0 ? _a : null,
+      download: (_b = this.download) !== null && _b !== void 0 ? _b : null
+    };
+    return this.href ? linkAttrs : btnAttrs;
+  }
+  getTagName() {
+    return this.href ? "a" : "button";
+  }
+  render() {
+    const TagName = this.getTagName();
+    return (index.h(index.Host, { class: "pn-button" }, index.h(TagName, Object.assign({ class: this.getClassNames(), "data-loading": this.loading, onClick: (e) => this.ripple(e, this.hostElement), "aria-label": this.ariaLabel, "aria-labelledby": this.ariaLabelledby, "data-tooltip-open": this.tooltipOpen, "aria-controls": this.ariaControls, "aria-pressed": this.ariaPressed }, this.getAttributes()), index.h("div", { class: "pn-button-bg" }), index.h("div", { class: "pn-button-content" }, !this.iconOnly &&
+      index.h("slot", null), this.icon &&
+      index.h("pn-icon", { small: this.small, symbol: this.icon })), index.h("pn-spinner", { light: true }), this.iconOnly &&
+      index.h("div", { class: "button-tooltip" }, index.h("slot", null)))));
+  }
+  get hostElement() { return index.getElement(this); }
+  static get watchers() { return {
+    "tooltipOpen": ["openHandler"]
+  }; }
+};
+Pnbutton.style = pnButtonCss;
+
+const pnSearchFieldCss = "pn-search-field{display:-ms-inline-flexbox;display:inline-flex}pn-search-field>pn-button{margin-left:0.35em}pn-search-field>pn-button button .pn-button-bg{-webkit-transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, left 0.2s, -webkit-box-shadow 0.1s, -webkit-transform 0.2s;transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, left 0.2s, -webkit-box-shadow 0.1s, -webkit-transform 0.2s;transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, box-shadow 0.1s, left 0.2s, transform 0.2s;transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, box-shadow 0.1s, left 0.2s, transform 0.2s, -webkit-box-shadow 0.1s, -webkit-transform 0.2s}pn-search-field>pn-button[data-loading=true] .pn-button-bg{left:0;-webkit-transform:translateX(0);transform:translateX(0);-webkit-transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, -webkit-box-shadow 0.1s;transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, -webkit-box-shadow 0.1s;transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, box-shadow 0.1s;transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, box-shadow 0.1s, -webkit-box-shadow 0.1s}pn-search-field>pn-button[data-loading=true] pn-spinner{left:0.75em}pn-search-field input{padding:0.75em;min-height:3em;font-size:1em;height:100%;font-weight:500;-webkit-font-smoothing:antialiased;outline:none;border-radius:3em;border:0.1rem solid #5E554A;-webkit-transition:border 0.15s, -webkit-box-shadow 0.15s;transition:border 0.15s, -webkit-box-shadow 0.15s;transition:box-shadow 0.15s, border 0.15s;transition:box-shadow 0.15s, border 0.15s, -webkit-box-shadow 0.15s;color:#000000;width:100%}pn-search-field input::-webkit-search-cancel-button{display:none}pn-search-field input::-webkit-input-placeholder{color:#969087;font-weight:normal}pn-search-field input::-moz-placeholder{color:#969087;font-weight:normal}pn-search-field input:-ms-input-placeholder{color:#969087;font-weight:normal}pn-search-field input::-ms-input-placeholder{color:#969087;font-weight:normal}pn-search-field input::placeholder{color:#969087;font-weight:normal}pn-search-field input:focus{border:0.1rem solid #005D92;-webkit-box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92}pn-search-field input:hover{border:0.1rem solid #00A0D6}pn-search-field input:disabled{background:#F3F2F2;border:none}pn-search-field>.input-container{width:100%;position:relative}pn-search-field>.input-container .button-container{position:absolute;top:0;right:0;background:transparent;width:3em;height:100%;overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}pn-search-field>.input-container button{position:absolute;left:50%;top:50%;-webkit-transform:translate(100%, -50%);transform:translate(100%, -50%);background:none;border:none;color:#005D92;padding:0.3rem;margin:0;font-size:0.875em;border-radius:50%;outline:none;-webkit-transition:border 0.1s, background 0.2s, opacity 0.2s, -webkit-box-shadow 0.1s, -webkit-transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s;transition:border 0.1s, background 0.2s, opacity 0.2s, -webkit-box-shadow 0.1s, -webkit-transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s;transition:border 0.1s, background 0.2s, box-shadow 0.1s, transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s, opacity 0.2s;transition:border 0.1s, background 0.2s, box-shadow 0.1s, transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s, opacity 0.2s, -webkit-box-shadow 0.1s, -webkit-transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s;border:0.1rem solid transparent;-webkit-tap-highlight-color:transparent}pn-search-field>.input-container button.clear,pn-search-field>.input-container button.search{cursor:pointer}pn-search-field>.input-container button:focus{-webkit-box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92}pn-search-field>.input-container button:hover,pn-search-field>.input-container button:focus{background:#E0F8FF}pn-search-field>.input-container button:active{background:#005D92}pn-search-field>.input-container button:active pn-icon svg,pn-search-field>.input-container button:active pn-icon svg path{fill:white}pn-search-field.searching button.search{-webkit-transform:translate(150%, -50%);transform:translate(150%, -50%)}pn-search-field.searching button.clear{-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}pn-search-field.button-none input,pn-search-field.button-icon-inline input{padding-right:3.3em}pn-search-field.button-none pn-spinner,pn-search-field.button-icon-inline pn-spinner{position:absolute;left:50%;top:50%;-webkit-transform:translate(100%, -50%);transform:translate(100%, -50%);-webkit-transition:-webkit-transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s;transition:-webkit-transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s;transition:transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s;transition:transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s, -webkit-transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s}pn-search-field.button-none button.search,pn-search-field.button-icon-inline button.search{-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}pn-search-field.button-none.loading button,pn-search-field.button-icon-inline.loading button{-webkit-transform:translate(100%, -50%);transform:translate(100%, -50%)}pn-search-field.button-none.loading pn-spinner,pn-search-field.button-icon-inline.loading pn-spinner{-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}pn-search-field.button-none.searching button.search{-webkit-transform:translate(100%, -50%);transform:translate(100%, -50%)}pn-search-field.button-icon>pn-button[data-loading=true] .pn-button-bg{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}";
+
+let PnSearchField = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.search = index.createEvent(this, "search", 7);
+    this.update = index.createEvent(this, "update", 7);
+    this.disabled = false;
+    this.placeholder = null;
+    this.inputid = null;
+    this.name = null;
+    this.autocomplete = null;
+    this.value = null;
+    /** Label for the button */
+    this.label = null;
+    /** Loading animation */
+    this.loading = false;
+    /** Button type, options are 'none' for no button, 'icon' for a labelless button with just a search icon and 'icon-inline' for a search button inside of the search field (this last option disables the clear field button) */
+    this.button = '';
+    /** Light instead of dark search button */
+    this.light = false;
+  }
+  inputHandler() {
+    this.update.emit(this.value);
+  }
+  emitSearch(e) {
+    if (e.type === 'click' ||
+      (e.type === 'keydown' && e.key === 'Enter')) {
+      // We prevent the native search event since it's not supported in IE and FF, then we emit our own instead
+      e.preventDefault();
+      this.search.emit(this.value);
+    }
+  }
+  setVal(e) {
+    this.value = e.target.value;
+  }
+  clearInput() {
+    this.value = '';
+    this.update.emit(this.value);
+    this.hostElement.querySelector('input').focus();
+  }
+  getClassNames() {
+    let classNames = '';
+    const buttonTypes = ['none', 'icon', 'icon-inline'];
+    if (this.value)
+      classNames += 'searching ';
+    if (this.loading)
+      classNames += 'loading ';
+    if (buttonTypes.includes(this.button))
+      classNames += `button-${this.button} `;
+    return classNames;
+  }
+  render() {
+    return (index.h(index.Host, { class: this.getClassNames() }, index.h("div", { class: "input-container" }, index.h("input", { type: "search", value: this.value, id: this.inputid, name: this.name, placeholder: this.placeholder, disabled: this.disabled, autocomplete: this.autocomplete, onKeyDown: (e) => this.emitSearch(e), onInput: (e) => this.setVal(e) }), index.h("div", { class: "button-container" }, (this.button === 'none' || this.button === 'icon-inline') &&
+      index.h("button", { class: "search", tabindex: this.button === 'icon-inline' ? '0' : '-1', onClick: (e) => this.emitSearch(e), "aria-label": "search", title: "search" }, index.h("pn-icon", { symbol: "search", color: "blue700" })), (this.button !== 'icon-inline') &&
+      index.h("button", { class: "clear", "aria-label": "clear", title: "clear search field", tabindex: this.value && (!this.loading || this.button !== 'none') ? '0' : '-1', onClick: () => this.clearInput() }, index.h("pn-icon", { symbol: "close-small", color: "blue700" })), this.button === 'none' || this.button === 'icon-inline' && index.h("pn-spinner", null))), (this.button !== 'none' && this.button !== 'icon-inline') &&
+      index.h("pn-button", { onClick: (e) => this.emitSearch(e), loading: this.loading, icon: "search", appearance: this.light ? 'light' : 'dark', "icon-only": this.button === 'icon' }, this.label)));
+  }
+  get hostElement() { return index.getElement(this); }
+};
+PnSearchField.style = pnSearchFieldCss;
+
+exports.pn_button = Pnbutton;
+exports.pn_search_field = PnSearchField;