ku4web-components 6.5.5 → 6.5.6

package/dist/ku4web-components/ku4-tab-list.entry.js

@@ -0,0 +1,76 @@
+import { r as registerInstance, h, f as Host, g as getElement } from './index-a02dcfc8.js';
+import { K as Key } from './index-aa119486.js';
+import { u as uid } from './uid-3716c2c4.js';
+import './index-6cfd87e4.js';
+
+const ku4TabListCss = ":host{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}";
+
+const Ku4TabList = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  handleTabClick({ target }) {
+    this.tabs.includes(target) && this.open(target);
+  }
+  handleTabKeyUp({ target, detail: e }) {
+    if (!(this.tabs.includes(target))) {
+      return;
+    }
+    if (Key.left.didFire(e)) {
+      this.open(this.previous(target));
+    }
+    if (Key.right.didFire(e)) {
+      this.open(this.next(target));
+    }
+  }
+  /**
+   * Open a ku4-tab in this ku4-tab-list.
+   * @param {Ku4Tab} tab - ku4-tab target to open.
+   */
+  async open(tab) {
+    return this.reset().select(tab);
+  }
+  select(tab) {
+    tab.select();
+    return this;
+  }
+  deselect(tab) {
+    tab.deselect();
+    return this;
+  }
+  reset() {
+    this.tabs.forEach(tab => this.deselect(tab));
+    return this;
+  }
+  previous(tab) {
+    const { tabs, tabs: { length } } = this;
+    const index = tabs.indexOf(tab) - 1;
+    return tabs[index > -1 ? index : length - 1];
+  }
+  next(tab) {
+    const { tabs, tabs: { length } } = this;
+    const index = tabs.indexOf(tab) + 1;
+    return tabs[index < length ? index : 0];
+  }
+  componentDidRender() {
+    const tabs = [];
+    const panels = [];
+    [].slice.call(this.host.children).forEach((child) => {
+      if (child.tagName === 'KU4-TAB') {
+        tabs.push(child);
+      }
+      if (child.tagName === 'KU4-TAB-PANEL') {
+        panels.push(child);
+      }
+    });
+    this.tabs = tabs;
+    this.tabs.forEach((tab, index) => tab.connect(panels[index]));
+  }
+  render() {
+    return (h(Host, { id: this.host.id || uid(), role: "tablist", "aria-owns": this.host.id || uid() }, h("slot", null)));
+  }
+  get host() { return getElement(this); }
+};
+Ku4TabList.style = ku4TabListCss;
+
+export { Ku4TabList as ku4_tab_list };

package/dist/ku4web-components/ku4-tab-list.system.entry.js

@@ -0,0 +1 @@
+var __awaiter=this&&this.__awaiter||function(t,e,n,r){function i(t){return t instanceof n?t:new n((function(e){e(t)}))}return new(n||(n=Promise))((function(n,o){function s(t){try{u(r.next(t))}catch(e){o(e)}}function a(t){try{u(r["throw"](t))}catch(e){o(e)}}function u(t){t.done?n(t.value):i(t.value).then(s,a)}u((r=r.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},r,i,o,s;return s={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(s[Symbol.iterator]=function(){return this}),s;function a(t){return function(e){return u([t,e])}}function u(s){if(r)throw new TypeError("Generator is already executing.");while(n)try{if(r=1,i&&(o=s[0]&2?i["return"]:s[0]?i["throw"]||((o=i["return"])&&o.call(i),0):i.next)&&!(o=o.call(i,s[1])).done)return o;if(i=0,o)s=[s[0]&2,o.value];switch(s[0]){case 0:case 1:o=s;break;case 4:n.label++;return{value:s[1],done:false};case 5:n.label++;i=s[1];s=[0];continue;case 7:s=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(s[0]===6||s[0]===2)){n=0;continue}if(s[0]===3&&(!o||s[1]>o[0]&&s[1]<o[3])){n.label=s[1];break}if(s[0]===6&&n.label<o[1]){n.label=o[1];o=s;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(s);break}if(o[2])n.ops.pop();n.trys.pop();continue}s=e.call(t,n)}catch(a){s=[6,a];i=0}finally{r=o=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};System.register(["./index-29f2b09f.system.js","./index-1c93827a.system.js","./uid-2ed9f227.system.js","./index-5d0cb00d.system.js"],(function(t){"use strict";var e,n,r,i,o,s;return{setters:[function(t){e=t.r;n=t.h;r=t.f;i=t.g},function(t){o=t.K},function(t){s=t.u},function(){}],execute:function(){var a=":host{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}";var u=t("ku4_tab_list",function(){function t(t){e(this,t)}t.prototype.handleTabClick=function(t){var e=t.target;this.tabs.includes(e)&&this.open(e)};t.prototype.handleTabKeyUp=function(t){var e=t.target,n=t.detail;if(!this.tabs.includes(e)){return}if(o.left.didFire(n)){this.open(this.previous(e))}if(o.right.didFire(n)){this.open(this.next(e))}};t.prototype.open=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){return[2,this.reset().select(t)]}))}))};t.prototype.select=function(t){t.select();return this};t.prototype.deselect=function(t){t.deselect();return this};t.prototype.reset=function(){var t=this;this.tabs.forEach((function(e){return t.deselect(e)}));return this};t.prototype.previous=function(t){var e=this,n=e.tabs,r=e.tabs.length;var i=n.indexOf(t)-1;return n[i>-1?i:r-1]};t.prototype.next=function(t){var e=this,n=e.tabs,r=e.tabs.length;var i=n.indexOf(t)+1;return n[i<r?i:0]};t.prototype.componentDidRender=function(){var t=[];var e=[];[].slice.call(this.host.children).forEach((function(n){if(n.tagName==="KU4-TAB"){t.push(n)}if(n.tagName==="KU4-TAB-PANEL"){e.push(n)}}));this.tabs=t;this.tabs.forEach((function(t,n){return t.connect(e[n])}))};t.prototype.render=function(){return n(r,{id:this.host.id||s(),role:"tablist","aria-owns":this.host.id||s()},n("slot",null))};Object.defineProperty(t.prototype,"host",{get:function(){return i(this)},enumerable:false,configurable:true});return t}());u.style=a}}}));

package/dist/ku4web-components/ku4-tab-panel.entry.js

@@ -0,0 +1,72 @@
+import { r as registerInstance, h, f as Host, g as getElement } from './index-a02dcfc8.js';
+import { u as uid } from './uid-3716c2c4.js';
+import './index-6cfd87e4.js';
+
+const ku4TabPanelCss = ":host{-webkit-backface-visibility:hidden;display:block;width:100%;height:auto;max-height:0;-webkit-transition:max-height 0.4s, padding 0.6s;transition:max-height 0.4s, padding 0.6s;overflow:auto}@media only screen and (min-width: 768px){:host{display:none;border-top:1px solid #ccc;border-bottom:1px solid #ccc;max-height:initial !important;-webkit-transition:none;transition:none;-ms-flex-order:2;order:2}:host([selected]){display:block;max-height:initial !important;-webkit-transition:none;transition:none}}";
+
+const Ku4TabPanel = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Set true to display panel
+     */
+    this.selected = false;
+    this.maxHeight = this.selected ? 'none' : '0px';
+  }
+  handleTransitionEnd() {
+    this.maxHeight = this.selected ? 'none' : '0px';
+  }
+  /**
+   * Set this panel as selected.
+   */
+  async select() {
+    if (this.selected) {
+      return;
+    }
+    this.selected = true;
+    if (this.hasTransition) {
+      this.maxHeight = `${this.host.scrollHeight}px`;
+    }
+    else {
+      this.handleTransitionEnd();
+    }
+  }
+  /**
+   * Unset this panel as selected.
+   */
+  async deselect() {
+    if (!this.selected) {
+      return;
+    }
+    this.selected = false;
+    this.host.style.maxHeight = `${this.host.scrollHeight}px`;
+    if (this.hasTransition) {
+      this.maxHeight = '0px';
+    }
+    else {
+      this.handleTransitionEnd();
+    }
+  }
+  /**
+   * Connect this panel to a tab.
+   * @param {Ku4Tab} tab - Tab to connect to this panel
+   */
+  async connect(tab) {
+    tab.$assignPanel(this);
+    this.tab = tab;
+  }
+  get hasTransition() {
+    const transition = window
+      .getComputedStyle(this.host)
+      .getPropertyValue('transition');
+    return !/none/.test(transition);
+  }
+  render() {
+    const { selected, tab, maxHeight } = this;
+    return (h(Host, { role: "tabpanel", id: this.host.id || uid(), "aria-hidden": selected ? 'false' : 'true', "aria-labelledby": tab && tab.id, tabIndex: selected ? 0 : -1, style: { maxHeight } }, h("slot", null)));
+  }
+  get host() { return getElement(this); }
+};
+Ku4TabPanel.style = ku4TabPanelCss;
+
+export { Ku4TabPanel as ku4_tab_panel };

package/dist/ku4web-components/ku4-tab-panel.system.entry.js

@@ -0,0 +1 @@
+var __awaiter=this&&this.__awaiter||function(t,e,n,i){function r(t){return t instanceof n?t:new n((function(e){e(t)}))}return new(n||(n=Promise))((function(n,o){function s(t){try{l(i.next(t))}catch(e){o(e)}}function a(t){try{l(i["throw"](t))}catch(e){o(e)}}function l(t){t.done?n(t.value):r(t.value).then(s,a)}l((i=i.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},i,r,o,s;return s={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(s[Symbol.iterator]=function(){return this}),s;function a(t){return function(e){return l([t,e])}}function l(s){if(i)throw new TypeError("Generator is already executing.");while(n)try{if(i=1,r&&(o=s[0]&2?r["return"]:s[0]?r["throw"]||((o=r["return"])&&o.call(r),0):r.next)&&!(o=o.call(r,s[1])).done)return o;if(r=0,o)s=[s[0]&2,o.value];switch(s[0]){case 0:case 1:o=s;break;case 4:n.label++;return{value:s[1],done:false};case 5:n.label++;r=s[1];s=[0];continue;case 7:s=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(s[0]===6||s[0]===2)){n=0;continue}if(s[0]===3&&(!o||s[1]>o[0]&&s[1]<o[3])){n.label=s[1];break}if(s[0]===6&&n.label<o[1]){n.label=o[1];o=s;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(s);break}if(o[2])n.ops.pop();n.trys.pop();continue}s=e.call(t,n)}catch(a){s=[6,a];r=0}finally{i=o=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};System.register(["./index-29f2b09f.system.js","./uid-2ed9f227.system.js","./index-5d0cb00d.system.js"],(function(t){"use strict";var e,n,i,r,o;return{setters:[function(t){e=t.r;n=t.h;i=t.f;r=t.g},function(t){o=t.u},function(){}],execute:function(){var s=":host{-webkit-backface-visibility:hidden;display:block;width:100%;height:auto;max-height:0;-webkit-transition:max-height 0.4s, padding 0.6s;transition:max-height 0.4s, padding 0.6s;overflow:auto}@media only screen and (min-width: 768px){:host{display:none;border-top:1px solid #ccc;border-bottom:1px solid #ccc;max-height:initial !important;-webkit-transition:none;transition:none;-ms-flex-order:2;order:2}:host([selected]){display:block;max-height:initial !important;-webkit-transition:none;transition:none}}";var a=t("ku4_tab_panel",function(){function t(t){e(this,t);this.selected=false;this.maxHeight=this.selected?"none":"0px"}t.prototype.handleTransitionEnd=function(){this.maxHeight=this.selected?"none":"0px"};t.prototype.select=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){if(this.selected){return[2]}this.selected=true;if(this.hasTransition){this.maxHeight="".concat(this.host.scrollHeight,"px")}else{this.handleTransitionEnd()}return[2]}))}))};t.prototype.deselect=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){if(!this.selected){return[2]}this.selected=false;this.host.style.maxHeight="".concat(this.host.scrollHeight,"px");if(this.hasTransition){this.maxHeight="0px"}else{this.handleTransitionEnd()}return[2]}))}))};t.prototype.connect=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){t.$assignPanel(this);this.tab=t;return[2]}))}))};Object.defineProperty(t.prototype,"hasTransition",{get:function(){var t=window.getComputedStyle(this.host).getPropertyValue("transition");return!/none/.test(t)},enumerable:false,configurable:true});t.prototype.render=function(){var t=this,e=t.selected,r=t.tab,s=t.maxHeight;return n(i,{role:"tabpanel",id:this.host.id||o(),"aria-hidden":e?"false":"true","aria-labelledby":r&&r.id,tabIndex:e?0:-1,style:{maxHeight:s}},n("slot",null))};Object.defineProperty(t.prototype,"host",{get:function(){return r(this)},enumerable:false,configurable:true});return t}());a.style=s}}}));

package/dist/ku4web-components/ku4-tab.entry.js

@@ -0,0 +1,63 @@
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-a02dcfc8.js';
+import { u as uid } from './uid-3716c2c4.js';
+import './index-6cfd87e4.js';
+
+const ku4TabCss = "button{margin:0;padding:0;border:none;background:transparent;-webkit-appearance:none}:host{position:relative;display:block;width:100%;padding:20px 30px;background-color:#eee;text-align:center;color:#aaa;cursor:pointer}:host(:focus){background-color:#eee;color:#666;z-index:2}:host(:hover){background-color:#eee;color:#666}:host(:active){background-color:#fff;color:#333}:host([selected]){border-top:1px solid #ccc;border-bottom:1px solid #ccc;background-color:#fff;color:#444}button{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;width:100%}@media only screen and (min-width: 768px){:host{width:auto;border-top:1px solid #ccc;border-right:1px solid #ccc;border-top-left-radius:4px;border-top-right-radius:4px;background-color:#eee}:host(:first-of-type){border-left:1px solid #ccc}:host([selected]){padding-bottom:1px;border-top:1px solid #ccc;border-bottom:none}:host([selected]):after{content:\" \";position:absolute;display:block;left:0;bottom:-1px;width:100%;height:1px;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:inherit}}";
+
+const Ku4Tab = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.tabClick = createEvent(this, "ku4TabClick", 7);
+    this.tabKeyUp = createEvent(this, "ku4TabKeyup", 7);
+    /**
+     * Active when true
+     */
+    this.selected = false;
+  }
+  handleClick(e) {
+    this.tabClick.emit(e);
+  }
+  handleKeyUp(e) {
+    this.tabKeyUp.emit(e);
+  }
+  /**
+   * Set this tab as selected.
+   */
+  async select() {
+    this.selected = true;
+    this.panel.select();
+    this.host.focus();
+  }
+  /**
+   * Unset this tab as selected
+   */
+  async deselect() {
+    this.selected = false;
+    this.panel.deselect();
+  }
+  /**
+   * Connect this tab to a panel
+   * @param {HTMLElement} panel - The target ku4-tab-panel HTMLElement
+   */
+  async connect(panel) {
+    panel.connect(this);
+  }
+  get id() {
+    return this.host.id || uid();
+  }
+  /**
+   * @param {Ku4TabPanel} panel - panel to assign to this tab
+   * @internal
+   */
+  $assignPanel(panel) {
+    this.panel = panel;
+  }
+  render() {
+    const { selected, panel } = this;
+    return (h(Host, { id: this.host.id || uid(), role: "tab", type: "button", tabIndex: selected ? 0 : -1, "aria-controls": panel && panel.id, "aria-selected": selected ? 'true' : 'false' }, h("slot", null)));
+  }
+  get host() { return getElement(this); }
+};
+Ku4Tab.style = ku4TabCss;
+
+export { Ku4Tab as ku4_tab };

package/dist/ku4web-components/ku4-tab.system.entry.js

@@ -0,0 +1 @@
+var __awaiter=this&&this.__awaiter||function(t,e,o,r){function n(t){return t instanceof o?t:new o((function(e){e(t)}))}return new(o||(o=Promise))((function(o,i){function c(t){try{a(r.next(t))}catch(e){i(e)}}function s(t){try{a(r["throw"](t))}catch(e){i(e)}}function a(t){t.done?o(t.value):n(t.value).then(c,s)}a((r=r.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var o={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},r,n,i,c;return c={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(c[Symbol.iterator]=function(){return this}),c;function s(t){return function(e){return a([t,e])}}function a(c){if(r)throw new TypeError("Generator is already executing.");while(o)try{if(r=1,n&&(i=c[0]&2?n["return"]:c[0]?n["throw"]||((i=n["return"])&&i.call(n),0):n.next)&&!(i=i.call(n,c[1])).done)return i;if(n=0,i)c=[c[0]&2,i.value];switch(c[0]){case 0:case 1:i=c;break;case 4:o.label++;return{value:c[1],done:false};case 5:o.label++;n=c[1];c=[0];continue;case 7:c=o.ops.pop();o.trys.pop();continue;default:if(!(i=o.trys,i=i.length>0&&i[i.length-1])&&(c[0]===6||c[0]===2)){o=0;continue}if(c[0]===3&&(!i||c[1]>i[0]&&c[1]<i[3])){o.label=c[1];break}if(c[0]===6&&o.label<i[1]){o.label=i[1];i=c;break}if(i&&o.label<i[2]){o.label=i[2];o.ops.push(c);break}if(i[2])o.ops.pop();o.trys.pop();continue}c=e.call(t,o)}catch(s){c=[6,s];n=0}finally{r=i=0}if(c[0]&5)throw c[1];return{value:c[0]?c[1]:void 0,done:true}}};System.register(["./index-29f2b09f.system.js","./uid-2ed9f227.system.js","./index-5d0cb00d.system.js"],(function(t){"use strict";var e,o,r,n,i,c;return{setters:[function(t){e=t.r;o=t.e;r=t.h;n=t.f;i=t.g},function(t){c=t.u},function(){}],execute:function(){var s='button{margin:0;padding:0;border:none;background:transparent;-webkit-appearance:none}:host{position:relative;display:block;width:100%;padding:20px 30px;background-color:#eee;text-align:center;color:#aaa;cursor:pointer}:host(:focus){background-color:#eee;color:#666;z-index:2}:host(:hover){background-color:#eee;color:#666}:host(:active){background-color:#fff;color:#333}:host([selected]){border-top:1px solid #ccc;border-bottom:1px solid #ccc;background-color:#fff;color:#444}button{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;width:100%}@media only screen and (min-width: 768px){:host{width:auto;border-top:1px solid #ccc;border-right:1px solid #ccc;border-top-left-radius:4px;border-top-right-radius:4px;background-color:#eee}:host(:first-of-type){border-left:1px solid #ccc}:host([selected]){padding-bottom:1px;border-top:1px solid #ccc;border-bottom:none}:host([selected]):after{content:" ";position:absolute;display:block;left:0;bottom:-1px;width:100%;height:1px;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:inherit}}';var a=t("ku4_tab",function(){function t(t){e(this,t);this.tabClick=o(this,"ku4TabClick",7);this.tabKeyUp=o(this,"ku4TabKeyup",7);this.selected=false}t.prototype.handleClick=function(t){this.tabClick.emit(t)};t.prototype.handleKeyUp=function(t){this.tabKeyUp.emit(t)};t.prototype.select=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.selected=true;this.panel.select();this.host.focus();return[2]}))}))};t.prototype.deselect=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.selected=false;this.panel.deselect();return[2]}))}))};t.prototype.connect=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){t.connect(this);return[2]}))}))};Object.defineProperty(t.prototype,"id",{get:function(){return this.host.id||c()},enumerable:false,configurable:true});t.prototype.$assignPanel=function(t){this.panel=t};t.prototype.render=function(){var t=this,e=t.selected,o=t.panel;return r(n,{id:this.host.id||c(),role:"tab",type:"button",tabIndex:e?0:-1,"aria-controls":o&&o.id,"aria-selected":e?"true":"false"},r("slot",null))};Object.defineProperty(t.prototype,"host",{get:function(){return i(this)},enumerable:false,configurable:true});return t}());a.style=s}}}));

package/dist/ku4web-components/ku4-table.entry.js

@@ -0,0 +1,79 @@
+import { r as registerInstance, h, g as getElement } from './index-a02dcfc8.js';
+
+const ku4TableCss = "ku4-table{position:relative;display:block}@media only screen and (min-width: 1px) and (max-width: 767px){@supports (display: contents){ku4-table[stack-xs=column] table{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}ku4-table[stack-xs=column] thead,ku4-table[stack-xs=column] tbody,ku4-table[stack-xs=column] tfoot,ku4-table[stack-xs=column] tr{display:contents}ku4-table[stack-xs=column] thead .ku4-head-header{display:none}ku4-table[stack-xs=column] tbody th,ku4-table[stack-xs=column] tfoot th{position:absolute;display:block;width:0;height:0;margin:0;padding:0;line-height:0;font-size:0}ku4-table[stack-xs=column] tbody td,ku4-table[stack-xs=column] tfoot td{display:-ms-flexbox;display:flex}ku4-table[stack-xs=column] tbody td:before,ku4-table[stack-xs=column] tfoot td:before{content:attr(data-ku4-row-header)}}ku4-table[stack-xs=row] table{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}ku4-table[stack-xs=row] thead th,ku4-table[stack-xs=row] thead td{display:none}ku4-table[stack-xs=row] thead,ku4-table[stack-xs=row] tbody,ku4-table[stack-xs=row] tfoot,ku4-table[stack-xs=row] tr,ku4-table[stack-xs=row] th,ku4-table[stack-xs=row] td{display:block}ku4-table[stack-xs=row] tbody td:before,ku4-table[stack-xs=row] tfoot td:before{content:attr(data-ku4-column-header)}}@media only screen and (min-width: 768px) and (max-width: 991px){@supports (display: contents){ku4-table[stack-sm=column] table{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}ku4-table[stack-sm=column] thead,ku4-table[stack-sm=column] tbody,ku4-table[stack-sm=column] tfoot,ku4-table[stack-sm=column] tr{display:contents}ku4-table[stack-sm=column] thead .ku4-head-header{display:none}ku4-table[stack-sm=column] tbody th,ku4-table[stack-sm=column] tfoot th{position:absolute;display:block;width:0;height:0;margin:0;padding:0;line-height:0;font-size:0}ku4-table[stack-sm=column] tbody td,ku4-table[stack-sm=column] tfoot td{display:-ms-flexbox;display:flex}ku4-table[stack-sm=column] tbody td:before,ku4-table[stack-sm=column] tfoot td:before{content:attr(data-ku4-row-header)}}ku4-table[stack-sm=row] table{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}ku4-table[stack-sm=row] thead th,ku4-table[stack-sm=row] thead td{display:none}ku4-table[stack-sm=row] thead,ku4-table[stack-sm=row] tbody,ku4-table[stack-sm=row] tfoot,ku4-table[stack-sm=row] tr,ku4-table[stack-sm=row] th,ku4-table[stack-sm=row] td{display:block}ku4-table[stack-sm=row] tbody td:before,ku4-table[stack-sm=row] tfoot td:before{content:attr(data-ku4-column-header)}}";
+
+const Ku4Table = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * The member to stack on at extra-small views.
+     */
+    // eslint-disable-next-line @stencil/strict-mutable
+    this.stackXs = '';
+    /**
+     * The member to stack on at small views.
+     */
+    // eslint-disable-next-line @stencil/strict-mutable
+    this.stackSm = '';
+  }
+  stack() {
+    const theadHeaders = [].slice.call(this.host.querySelectorAll('thead th'));
+    const tbodyHeaders = [].slice.call(this.host.querySelectorAll('tbody th'));
+    const tfootHeaders = [].slice.call(this.host.querySelectorAll('tfoot th'));
+    const hasBodyHeaders = tbodyHeaders.length > 0;
+    const headerRows = this.host.querySelector('thead tr :first-child');
+    if (hasBodyHeaders) {
+      headerRows.classList.add('ku4-head-header');
+    }
+    theadHeaders.forEach((th, i) => {
+      // eslint-disable-next-line no-param-reassign
+      th.style.order = i + (!hasBodyHeaders);
+    });
+    [].slice.call(this.host.querySelectorAll('tbody tr')).forEach((tr, i) => {
+      [].slice.call(tr.querySelectorAll('td')).forEach((element, j) => {
+        // eslint-disable-next-line no-param-reassign
+        element.style.order = j + 1;
+        try {
+          const columnHeader = theadHeaders[j + hasBodyHeaders];
+          const rowHeader = tbodyHeaders[i];
+          element.setAttribute('data-ku4-column-header', columnHeader.getAttribute('data-ku4-stack-header') || columnHeader.textContent);
+          element.setAttribute('data-ku4-row-header', rowHeader.getAttribute('data-ku4-stack-header') || rowHeader.textContent);
+        }
+        catch (e) { /*Fail silently*/ }
+      });
+    });
+    [].slice.call(this.host.querySelectorAll('tfoot tr')).forEach((tr, i) => {
+      [].slice.call(tr.querySelectorAll('td')).forEach((element, j) => {
+        // eslint-disable-next-line no-param-reassign
+        element.style.order = j + 1;
+        try {
+          const columnHeader = theadHeaders[j + hasBodyHeaders];
+          const rowHeader = tfootHeaders[i];
+          element.setAttribute('data-ku4-column-header', columnHeader.getAttribute('data-ku4-stack-header') || columnHeader.textContent);
+          element.setAttribute('data-ku4-row-header', rowHeader.getAttribute('data-ku4-stack-header') || rowHeader.textContent);
+        }
+        catch (e) { /*Fail silently*/ }
+      });
+    });
+  }
+  componentDidLoad() {
+    this.stack();
+    this.mutationObserver = new MutationObserver(() => this.stack());
+    this.mutationObserver.observe(this.host, { childList: true, subtree: true });
+  }
+  disconnectedCallback() {
+    try {
+      this.mutationObserver.disconnect();
+    }
+    catch (e) {
+      /** Fail silently **/
+    }
+  }
+  render() {
+    return h("slot", null);
+  }
+  get host() { return getElement(this); }
+};
+Ku4Table.style = ku4TableCss;
+
+export { Ku4Table as ku4_table };

package/dist/ku4web-components/ku4-table.system.entry.js

@@ -0,0 +1 @@
+System.register(["./index-29f2b09f.system.js"],(function(t){"use strict";var e,a,o;return{setters:[function(t){e=t.r;a=t.h;o=t.g}],execute:function(){var s="ku4-table{position:relative;display:block}@media only screen and (min-width: 1px) and (max-width: 767px){@supports (display: contents){ku4-table[stack-xs=column] table{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}ku4-table[stack-xs=column] thead,ku4-table[stack-xs=column] tbody,ku4-table[stack-xs=column] tfoot,ku4-table[stack-xs=column] tr{display:contents}ku4-table[stack-xs=column] thead .ku4-head-header{display:none}ku4-table[stack-xs=column] tbody th,ku4-table[stack-xs=column] tfoot th{position:absolute;display:block;width:0;height:0;margin:0;padding:0;line-height:0;font-size:0}ku4-table[stack-xs=column] tbody td,ku4-table[stack-xs=column] tfoot td{display:-ms-flexbox;display:flex}ku4-table[stack-xs=column] tbody td:before,ku4-table[stack-xs=column] tfoot td:before{content:attr(data-ku4-row-header)}}ku4-table[stack-xs=row] table{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}ku4-table[stack-xs=row] thead th,ku4-table[stack-xs=row] thead td{display:none}ku4-table[stack-xs=row] thead,ku4-table[stack-xs=row] tbody,ku4-table[stack-xs=row] tfoot,ku4-table[stack-xs=row] tr,ku4-table[stack-xs=row] th,ku4-table[stack-xs=row] td{display:block}ku4-table[stack-xs=row] tbody td:before,ku4-table[stack-xs=row] tfoot td:before{content:attr(data-ku4-column-header)}}@media only screen and (min-width: 768px) and (max-width: 991px){@supports (display: contents){ku4-table[stack-sm=column] table{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}ku4-table[stack-sm=column] thead,ku4-table[stack-sm=column] tbody,ku4-table[stack-sm=column] tfoot,ku4-table[stack-sm=column] tr{display:contents}ku4-table[stack-sm=column] thead .ku4-head-header{display:none}ku4-table[stack-sm=column] tbody th,ku4-table[stack-sm=column] tfoot th{position:absolute;display:block;width:0;height:0;margin:0;padding:0;line-height:0;font-size:0}ku4-table[stack-sm=column] tbody td,ku4-table[stack-sm=column] tfoot td{display:-ms-flexbox;display:flex}ku4-table[stack-sm=column] tbody td:before,ku4-table[stack-sm=column] tfoot td:before{content:attr(data-ku4-row-header)}}ku4-table[stack-sm=row] table{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}ku4-table[stack-sm=row] thead th,ku4-table[stack-sm=row] thead td{display:none}ku4-table[stack-sm=row] thead,ku4-table[stack-sm=row] tbody,ku4-table[stack-sm=row] tfoot,ku4-table[stack-sm=row] tr,ku4-table[stack-sm=row] th,ku4-table[stack-sm=row] td{display:block}ku4-table[stack-sm=row] tbody td:before,ku4-table[stack-sm=row] tfoot td:before{content:attr(data-ku4-column-header)}}";var l=t("ku4_table",function(){function t(t){e(this,t);this.stackXs="";this.stackSm=""}t.prototype.stack=function(){var t=[].slice.call(this.host.querySelectorAll("thead th"));var e=[].slice.call(this.host.querySelectorAll("tbody th"));var a=[].slice.call(this.host.querySelectorAll("tfoot th"));var o=e.length>0;var s=this.host.querySelector("thead tr :first-child");if(o){s.classList.add("ku4-head-header")}t.forEach((function(t,e){t.style.order=e+!o}));[].slice.call(this.host.querySelectorAll("tbody tr")).forEach((function(a,s){[].slice.call(a.querySelectorAll("td")).forEach((function(a,l){a.style.order=l+1;try{var c=t[l+o];var r=e[s];a.setAttribute("data-ku4-column-header",c.getAttribute("data-ku4-stack-header")||c.textContent);a.setAttribute("data-ku4-row-header",r.getAttribute("data-ku4-stack-header")||r.textContent)}catch(u){}}))}));[].slice.call(this.host.querySelectorAll("tfoot tr")).forEach((function(e,s){[].slice.call(e.querySelectorAll("td")).forEach((function(e,l){e.style.order=l+1;try{var c=t[l+o];var r=a[s];e.setAttribute("data-ku4-column-header",c.getAttribute("data-ku4-stack-header")||c.textContent);e.setAttribute("data-ku4-row-header",r.getAttribute("data-ku4-stack-header")||r.textContent)}catch(u){}}))}))};t.prototype.componentDidLoad=function(){var t=this;this.stack();this.mutationObserver=new MutationObserver((function(){return t.stack()}));this.mutationObserver.observe(this.host,{childList:true,subtree:true})};t.prototype.disconnectedCallback=function(){try{this.mutationObserver.disconnect()}catch(t){}};t.prototype.render=function(){return a("slot",null)};Object.defineProperty(t.prototype,"host",{get:function(){return o(this)},enumerable:false,configurable:true});return t}());l.style=s}}}));

package/dist/ku4web-components/ku4-tooltip.entry.js

@@ -0,0 +1,120 @@
+import { r as registerInstance, h, f as Host, g as getElement } from './index-a02dcfc8.js';
+import { C, j, M } from './index-6cfd87e4.js';
+
+const ku4TooltipCss = ":host{position:fixed;display:none;opacity:0;z-index:2;background-color:#fff;border:solid 1px #ccc}:host([visible]){display:block;opacity:1;-webkit-transition:opacity 0.4s;transition:opacity 0.4s}:host .arrow{position:absolute;width:var(--ku4-tooltip-arrow-size, 14px);height:var(--ku4-tooltip-arrow-size, 14px);background-color:inherit;-webkit-transform:rotate(45deg);transform:rotate(45deg);border:inherit;-webkit-box-shadow:var(--ku4-tooltip-arrow-box-shadow, none);box-shadow:var(--ku4-tooltip-arrow-box-shadow, none)}:host .content{position:relative}:host([top]) .arrow{top:calc(100% - var(--ku4-tooltip-arrow-offset, 7px));left:calc(50% - var(--ku4-tooltip-arrow-offset, 7px));border-top:none !important;border-left:none !important}:host([left]) .arrow{top:calc(50% - var(--ku4-tooltip-arrow-offset, 7px));left:calc(100% - var(--ku4-tooltip-arrow-offset, 7px));border-left:none !important;border-bottom:none !important}:host([bottom]) .arrow{left:calc(50% - var(--ku4-tooltip-arrow-offset, 7px));bottom:calc(100% - var(--ku4-tooltip-arrow-offset, 7px));border-bottom:none !important;border-right:none !important}:host([right]) .arrow{top:calc(50% - var(--ku4-tooltip-arrow-offset, 7px));right:calc(100% - var(--ku4-tooltip-arrow-offset, 7px));border-top:none !important;border-right:none !important}";
+
+const Ku4Tooltip = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.isShowing = false;
+    this.show = this.show.bind(this);
+    this.hide = this.hide.bind(this);
+    this._show = this._show.bind(this);
+    this._hide = this._hide.bind(this);
+    this._toggle = this._toggle.bind(this);
+    this.hideTimeout = new C(200).onTimeout(this._hide);
+  }
+  /**
+   * Show tooltip on target element.
+   * @param {HTMLElement} element - Element to show tooltip on
+   */
+  async show(element) {
+    this.hideTimeout.clear();
+    if (this.host.contains(element)) {
+      return;
+    }
+    else {
+      this.isShowing = true;
+      this.host.setAttribute('visible', 'true');
+      this.calcualatePosition(element);
+      this.scrollListener = j(() => this.calcualatePosition(element));
+      window.addEventListener('scroll', this.scrollListener, { passive: true });
+    }
+  }
+  /**
+   * Hide tool tip.
+   */
+  async hide() {
+    this.hideTimeout.clear().start();
+  }
+  _show(e) {
+    this.show(e.target);
+  }
+  _hide() {
+    window.removeEventListener('scroll', this.scrollListener);
+    this.host.removeAttribute('visible');
+    this.isShowing = false;
+  }
+  _toggle(e) {
+    this.isShowing ? this._hide() : this._show(e);
+  }
+  calcualatePosition(target) {
+    const { left, top, width, height } = target.getBoundingClientRect();
+    const { left: hleft, top: htop, width: hwidth, height: hheight } = this.host.getBoundingClientRect();
+    const targetBox = new M(left, top, width, height);
+    const hostBox = new M(hleft, htop, hwidth, hheight);
+    /**
+     * The measurements aren't quite lining up with center. They are off by a small bit
+     * Need to figure out why.
+     * Also the Arrow is not lining up. Looks like some small margin mistakes fix.
+     * Could also stand to figure out a way to support an arrow that is white with a border.
+     */
+    if (this.top) {
+      this.host.style.left = `${targetBox.origin.x + targetBox.dimensions.x / 2 - hostBox.dimensions.x / 2}px`;
+      this.host.style.top = `${targetBox.origin.y - hostBox.dimensions.y - 15}px`;
+    }
+    else if (this.left) {
+      this.host.style.left = `${targetBox.origin.x - hostBox.dimensions.x - 15}px`;
+      this.host.style.top = `${targetBox.origin.y + targetBox.dimensions.y / 2 - hostBox.dimensions.y / 2}px`;
+    }
+    else if (this.bottom) {
+      this.host.style.left = `${targetBox.origin.x + targetBox.dimensions.x / 2 - hostBox.dimensions.x / 2}px`;
+      this.host.style.top = `${targetBox.origin.y + targetBox.dimensions.y + 15}px`;
+    }
+    else if (this.right) {
+      this.host.style.left = `${targetBox.origin.x + targetBox.dimensions.x + 15}px`;
+      this.host.style.top = `${targetBox.origin.y + targetBox.dimensions.y / 2 - hostBox.dimensions.y / 2}px`;
+    }
+    else {
+      this.host.style.left = `${targetBox.origin.x + targetBox.dimensions.x / 2 - hostBox.dimensions.x / 2}px`;
+      this.host.style.top = `${targetBox.origin.y + targetBox.dimensions.y + 15}px`;
+    }
+  }
+  componentWillLoad() {
+    const { debug, element, host, top, left, bottom, right } = this;
+    if (!(top || left || bottom || right)) {
+      this.host.setAttribute('bottom', '');
+    }
+    document.querySelectorAll(element).forEach((element) => {
+      host.addEventListener('mouseover', this._show);
+      element.addEventListener('mouseover', this._show);
+      element.addEventListener('touchstart', this._toggle, { passive: true });
+      if (debug) {
+        return;
+      }
+      host.addEventListener('mouseout', this.hide);
+      element.addEventListener('mouseout', this.hide);
+    });
+  }
+  disconnectedCallback() {
+    const { debug, element, hideTimeout, host } = this;
+    document.querySelectorAll(element).forEach((element) => {
+      host.removeEventListener('mouseover', this._show);
+      element.removeEventListener('mouseover', this._show);
+      element.removeEventListener('touchstart', this._toggle);
+      if (debug) {
+        return;
+      }
+      host.removeEventListener('mouseout', this.hide);
+      element.removeEventListener('mouseout', this.hide);
+    });
+    hideTimeout.clear();
+  }
+  render() {
+    return (h(Host, { role: "tooltip" }, h("div", { class: "arrow" }), h("div", { class: "content" }, h("slot", null))));
+  }
+  get host() { return getElement(this); }
+};
+Ku4Tooltip.style = ku4TooltipCss;
+
+export { Ku4Tooltip as ku4_tooltip };

package/dist/ku4web-components/ku4-tooltip.system.entry.js

@@ -0,0 +1 @@
+var __awaiter=this&&this.__awaiter||function(t,o,e,i){function n(t){return t instanceof e?t:new e((function(o){o(t)}))}return new(e||(e=Promise))((function(e,r){function s(t){try{h(i.next(t))}catch(o){r(o)}}function a(t){try{h(i["throw"](t))}catch(o){r(o)}}function h(t){t.done?e(t.value):n(t.value).then(s,a)}h((i=i.apply(t,o||[])).next())}))};var __generator=this&&this.__generator||function(t,o){var e={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},i,n,r,s;return s={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(s[Symbol.iterator]=function(){return this}),s;function a(t){return function(o){return h([t,o])}}function h(s){if(i)throw new TypeError("Generator is already executing.");while(e)try{if(i=1,n&&(r=s[0]&2?n["return"]:s[0]?n["throw"]||((r=n["return"])&&r.call(n),0):n.next)&&!(r=r.call(n,s[1])).done)return r;if(n=0,r)s=[s[0]&2,r.value];switch(s[0]){case 0:case 1:r=s;break;case 4:e.label++;return{value:s[1],done:false};case 5:e.label++;n=s[1];s=[0];continue;case 7:s=e.ops.pop();e.trys.pop();continue;default:if(!(r=e.trys,r=r.length>0&&r[r.length-1])&&(s[0]===6||s[0]===2)){e=0;continue}if(s[0]===3&&(!r||s[1]>r[0]&&s[1]<r[3])){e.label=s[1];break}if(s[0]===6&&e.label<r[1]){e.label=r[1];r=s;break}if(r&&e.label<r[2]){e.label=r[2];e.ops.push(s);break}if(r[2])e.ops.pop();e.trys.pop();continue}s=o.call(t,e)}catch(a){s=[6,a];n=0}finally{i=r=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};System.register(["./index-29f2b09f.system.js","./index-5d0cb00d.system.js"],(function(t){"use strict";var o,e,i,n,r,s,a;return{setters:[function(t){o=t.r;e=t.h;i=t.f;n=t.g},function(t){r=t.C;s=t.j;a=t.M}],execute:function(){var h=":host{position:fixed;display:none;opacity:0;z-index:2;background-color:#fff;border:solid 1px #ccc}:host([visible]){display:block;opacity:1;-webkit-transition:opacity 0.4s;transition:opacity 0.4s}:host .arrow{position:absolute;width:var(--ku4-tooltip-arrow-size, 14px);height:var(--ku4-tooltip-arrow-size, 14px);background-color:inherit;-webkit-transform:rotate(45deg);transform:rotate(45deg);border:inherit;-webkit-box-shadow:var(--ku4-tooltip-arrow-box-shadow, none);box-shadow:var(--ku4-tooltip-arrow-box-shadow, none)}:host .content{position:relative}:host([top]) .arrow{top:calc(100% - var(--ku4-tooltip-arrow-offset, 7px));left:calc(50% - var(--ku4-tooltip-arrow-offset, 7px));border-top:none !important;border-left:none !important}:host([left]) .arrow{top:calc(50% - var(--ku4-tooltip-arrow-offset, 7px));left:calc(100% - var(--ku4-tooltip-arrow-offset, 7px));border-left:none !important;border-bottom:none !important}:host([bottom]) .arrow{left:calc(50% - var(--ku4-tooltip-arrow-offset, 7px));bottom:calc(100% - var(--ku4-tooltip-arrow-offset, 7px));border-bottom:none !important;border-right:none !important}:host([right]) .arrow{top:calc(50% - var(--ku4-tooltip-arrow-offset, 7px));right:calc(100% - var(--ku4-tooltip-arrow-offset, 7px));border-top:none !important;border-right:none !important}";var l=t("ku4_tooltip",function(){function t(t){o(this,t);this.isShowing=false;this.show=this.show.bind(this);this.hide=this.hide.bind(this);this._show=this._show.bind(this);this._hide=this._hide.bind(this);this._toggle=this._toggle.bind(this);this.hideTimeout=new r(200).onTimeout(this._hide)}t.prototype.show=function(t){return __awaiter(this,void 0,void 0,(function(){var o=this;return __generator(this,(function(e){this.hideTimeout.clear();if(this.host.contains(t)){return[2]}else{this.isShowing=true;this.host.setAttribute("visible","true");this.calcualatePosition(t);this.scrollListener=s((function(){return o.calcualatePosition(t)}));window.addEventListener("scroll",this.scrollListener,{passive:true})}return[2]}))}))};t.prototype.hide=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.hideTimeout.clear().start();return[2]}))}))};t.prototype._show=function(t){this.show(t.target)};t.prototype._hide=function(){window.removeEventListener("scroll",this.scrollListener);this.host.removeAttribute("visible");this.isShowing=false};t.prototype._toggle=function(t){this.isShowing?this._hide():this._show(t)};t.prototype.calcualatePosition=function(t){var o=t.getBoundingClientRect(),e=o.left,i=o.top,n=o.width,r=o.height;var s=this.host.getBoundingClientRect(),h=s.left,l=s.top,c=s.width,u=s.height;var p=new a(e,i,n,r);var f=new a(h,l,c,u);if(this.top){this.host.style.left="".concat(p.origin.x+p.dimensions.x/2-f.dimensions.x/2,"px");this.host.style.top="".concat(p.origin.y-f.dimensions.y-15,"px")}else if(this.left){this.host.style.left="".concat(p.origin.x-f.dimensions.x-15,"px");this.host.style.top="".concat(p.origin.y+p.dimensions.y/2-f.dimensions.y/2,"px")}else if(this.bottom){this.host.style.left="".concat(p.origin.x+p.dimensions.x/2-f.dimensions.x/2,"px");this.host.style.top="".concat(p.origin.y+p.dimensions.y+15,"px")}else if(this.right){this.host.style.left="".concat(p.origin.x+p.dimensions.x+15,"px");this.host.style.top="".concat(p.origin.y+p.dimensions.y/2-f.dimensions.y/2,"px")}else{this.host.style.left="".concat(p.origin.x+p.dimensions.x/2-f.dimensions.x/2,"px");this.host.style.top="".concat(p.origin.y+p.dimensions.y+15,"px")}};t.prototype.componentWillLoad=function(){var t=this;var o=this,e=o.debug,i=o.element,n=o.host,r=o.top,s=o.left,a=o.bottom,h=o.right;if(!(r||s||a||h)){this.host.setAttribute("bottom","")}document.querySelectorAll(i).forEach((function(o){n.addEventListener("mouseover",t._show);o.addEventListener("mouseover",t._show);o.addEventListener("touchstart",t._toggle,{passive:true});if(e){return}n.addEventListener("mouseout",t.hide);o.addEventListener("mouseout",t.hide)}))};t.prototype.disconnectedCallback=function(){var t=this;var o=this,e=o.debug,i=o.element,n=o.hideTimeout,r=o.host;document.querySelectorAll(i).forEach((function(o){r.removeEventListener("mouseover",t._show);o.removeEventListener("mouseover",t._show);o.removeEventListener("touchstart",t._toggle);if(e){return}r.removeEventListener("mouseout",t.hide);o.removeEventListener("mouseout",t.hide)}));n.clear()};t.prototype.render=function(){return e(i,{role:"tooltip"},e("div",{class:"arrow"}),e("div",{class:"content"},e("slot",null)))};Object.defineProperty(t.prototype,"host",{get:function(){return n(this)},enumerable:false,configurable:true});return t}());l.style=h}}}));

package/dist/ku4web-components/ku4-validation.entry.js

@@ -0,0 +1,162 @@
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-a02dcfc8.js';
+import { t, R, Y } from './index-6cfd87e4.js';
+
+/**
+ * Business logic for form validation:
+ * It tests against a list of regular expressions that all must pass for this
+ * to return true. And IFF an element is passed it will also have to match this value.
+ * @param {Array<RegExp>} expressions - List of regular expressions to test against.
+ * @param {string} value - The value to test
+ * @param {Array<string>} [options] - A list of valid options that this value must match if not null
+ * @param {HTMLElement} [element] - An element to test if the value matches its value if not null.
+ */
+const validate = (expressions, value, options, element) => options
+  ? options.some(v => v === value) && expressions.every(r => r.test(value))
+  : element
+    ? element.value === value && expressions.every(r => r.test(value))
+    : expressions.every(r => r.test(value));
+
+const ku4ValidationCss = ":host{visibility:hidden !important}:host([invalid]){visibility:visible !important}:host([disabled]){visibility:hidden !important}:host([invalid][disabled]){visibility:hidden !important}:host([invalid][hidden]){visibility:hidden !important}";
+
+const Ku4Validation = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.didValidate = createEvent(this, "validate", 7);
+    /**
+     * Validation RegExp pattern that the target field must match to
+     * be considered valid. Multiple patterns can be passed delimited
+     * by a `space` character. e.g. pattern1 pattern2 pattern3 etc.
+     * If your target field is optional you can accomplish this with
+     * your pattern using "(^$)|(YOUR-PATTERN)". This says that the
+     * field must be empty (^$) OR (YOUR-PATTERN).
+     */
+    this.pattern = '.*';
+    /**
+     * Any RegExp flags that you want to include in your pattern. Multiple
+     * patterns can be passed delimited by a `space` character. e.g.
+     * using the pattern1 pattern2 pattern3 example from the `pattern`
+     * property, you could pass "gimsuy gim gi". If you wanted to pass
+     * flags only for patterns 1 and 3 you will just skip flags for pattern2
+     * by typing nothing and instead typing another "space" e.g. "gimsuy  gi".
+     * If you wanted to skip flags for pattern1 you could start flags with a
+     * "space" e.g. " gim gi".
+     */
+    this.flags = '';
+    /**
+     * A reference to a named function or a function body that
+     * define a validation criteria and return `true` when the
+     * defined validation criteria are satisfied.
+     * The function will be called with one argument, `value`,
+     * that will contain the current value of the target field.
+     * Example: method="return value === 'valid'", or
+     * function validate(value) { return value === 'valid'; }
+     * method="validate(value)"
+     */
+    this.method = '';
+    const patterns = this.pattern.split(' ');
+    const flags = this.flags.split(' ');
+    const method = this.method.trim();
+    this.regex = patterns.map((pattern, i) => new RegExp(pattern, flags[i]));
+    this.validationMethod = t.isNullOrEmpty(method)
+      ? () => true
+      : new Function('value', (/^return/.test(method) ? method : `return ${method}`));
+    this.handleInput = this.handleInput.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleReset = this.handleReset.bind(this);
+  }
+  /**
+   * Call to explicitly validate this validation. This method
+   * is called internally on change and blur of the input internally.
+   * There is no default need to call this method.
+   */
+  async validate() {
+    return this.assert();
+  }
+  handleInput() {
+    (this.input.type === 'file' || t.isFalse(this.isValid)) && this.assert();
+  }
+  handleChange() {
+    (this.input.type === 'file' || t.isFalse(this.isValid)) && this.assert();
+  }
+  handleBlur() {
+    this.assert();
+  }
+  handleReset() {
+    this.isValid = true;
+    this.invalid = !this.isValid;
+    this.input.setAttribute('aria-invalid', this.invalid);
+  }
+  assert() {
+    const { ele, validOptions, input, regex, checked } = this;
+    if (input.type === 'file' && t.isNullOrEmpty(input.value)) {
+      return;
+    }
+    const previousIsValid = this.isValid;
+    this.isValid = this.disabled
+      ? true
+      : t.isBool(checked)
+        ? input.checked === checked
+        : validate(regex, input.value, validOptions, ele) && this.validationMethod(input.value);
+    this.invalid = !this.isValid;
+    input.setAttribute('aria-invalid', this.invalid);
+    if (t.isFalse(previousIsValid) && this.isValid) {
+      this.didValidate.emit(this.isValid);
+    }
+    return this.isValid;
+  }
+  componentWillLoad() {
+    this.input = document.getElementById(this.for);
+    if (t.exists(this.input)) {
+      this.ele = document.getElementById(this.element) || document.querySelector(this.element);
+      this.validOptions = t.exists(this.values)
+        ? this.values.split(',')
+        : (this.ele && this.ele.nodeName === 'DATALIST' &&
+          [].slice.call(this.ele.querySelectorAll('option'))
+            .map(option => option.value));
+      const describedby = this.input.getAttribute('aria-describedby');
+      const id = this.host.getAttribute('id') || R.uid();
+      this.host.setAttribute('id', id);
+      if (t.isNullOrEmpty(describedby)) {
+        this.input.setAttribute('aria-describedby', id);
+      }
+      /**
+       * We "wait" to put this on the next event loop. This allows
+       * ku4-mask to be placed anywhere in the dom and not affect
+       * to workings of ku4-validation.
+       */
+      Y(0).then(() => {
+        this.input.addEventListener('input', this.handleInput);
+        this.input.addEventListener('change', this.handleChange);
+        this.input.addEventListener('blur', this.handleBlur);
+      });
+      if (t.isFunction(this.host.closest)) {
+        this.form = this.host.closest('form');
+        if (this.form && this.form.addEventListener) {
+          this.form.addEventListener('reset', this.handleReset);
+        }
+      }
+    }
+    else {
+      // eslint-disable-next-line no-console
+      console.error('ku4-validation must have a valid `for` referencing target field `id`.');
+    }
+  }
+  disconnectedCallback() {
+    if (this.input && this.input.removeEventListener) {
+      this.input.removeEventListener('input', this.handleInput);
+      this.input.removeEventListener('change', this.handleChange);
+      this.input.removeEventListener('blur', this.handleBlur);
+    }
+    if (this.form && this.form.removeEventListener) {
+      this.form.removeEventListener('reset', this.handleReset);
+    }
+  }
+  render() {
+    return h(Host, { role: "alert", "aria-live": "assertive" }, h("slot", null));
+  }
+  get host() { return getElement(this); }
+};
+Ku4Validation.style = ku4ValidationCss;
+
+export { Ku4Validation as ku4_validation };

package/dist/ku4web-components/ku4-validation.system.entry.js

@@ -0,0 +1 @@
+var __awaiter=this&&this.__awaiter||function(t,e,i,n){function s(t){return t instanceof i?t:new i((function(e){e(t)}))}return new(i||(i=Promise))((function(i,r){function a(t){try{o(n.next(t))}catch(e){r(e)}}function l(t){try{o(n["throw"](t))}catch(e){r(e)}}function o(t){t.done?i(t.value):s(t.value).then(a,l)}o((n=n.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var i={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},n,s,r,a;return a={next:l(0),throw:l(1),return:l(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function l(t){return function(e){return o([t,e])}}function o(a){if(n)throw new TypeError("Generator is already executing.");while(i)try{if(n=1,s&&(r=a[0]&2?s["return"]:a[0]?s["throw"]||((r=s["return"])&&r.call(s),0):s.next)&&!(r=r.call(s,a[1])).done)return r;if(s=0,r)a=[a[0]&2,r.value];switch(a[0]){case 0:case 1:r=a;break;case 4:i.label++;return{value:a[1],done:false};case 5:i.label++;s=a[1];a=[0];continue;case 7:a=i.ops.pop();i.trys.pop();continue;default:if(!(r=i.trys,r=r.length>0&&r[r.length-1])&&(a[0]===6||a[0]===2)){i=0;continue}if(a[0]===3&&(!r||a[1]>r[0]&&a[1]<r[3])){i.label=a[1];break}if(a[0]===6&&i.label<r[1]){i.label=r[1];r=a;break}if(r&&i.label<r[2]){i.label=r[2];i.ops.push(a);break}if(r[2])i.ops.pop();i.trys.pop();continue}a=e.call(t,i)}catch(l){a=[6,l];s=0}finally{n=r=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};System.register(["./index-29f2b09f.system.js","./index-5d0cb00d.system.js"],(function(t){"use strict";var e,i,n,s,r,a,l,o;return{setters:[function(t){e=t.r;i=t.e;n=t.h;s=t.f;r=t.g},function(t){a=t.t;l=t.R;o=t.Y}],execute:function(){var h=function(t,e,i,n){return i?i.some((function(t){return t===e}))&&t.every((function(t){return t.test(e)})):n?n.value===e&&t.every((function(t){return t.test(e)})):t.every((function(t){return t.test(e)}))};var u=":host{visibility:hidden !important}:host([invalid]){visibility:visible !important}:host([disabled]){visibility:hidden !important}:host([invalid][disabled]){visibility:hidden !important}:host([invalid][hidden]){visibility:hidden !important}";var d=t("ku4_validation",function(){function t(t){e(this,t);this.didValidate=i(this,"validate",7);this.pattern=".*";this.flags="";this.method="";var n=this.pattern.split(" ");var s=this.flags.split(" ");var r=this.method.trim();this.regex=n.map((function(t,e){return new RegExp(t,s[e])}));this.validationMethod=a.isNullOrEmpty(r)?function(){return true}:new Function("value",/^return/.test(r)?r:"return ".concat(r));this.handleInput=this.handleInput.bind(this);this.handleChange=this.handleChange.bind(this);this.handleBlur=this.handleBlur.bind(this);this.handleReset=this.handleReset.bind(this)}t.prototype.validate=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){return[2,this.assert()]}))}))};t.prototype.handleInput=function(){(this.input.type==="file"||a.isFalse(this.isValid))&&this.assert()};t.prototype.handleChange=function(){(this.input.type==="file"||a.isFalse(this.isValid))&&this.assert()};t.prototype.handleBlur=function(){this.assert()};t.prototype.handleReset=function(){this.isValid=true;this.invalid=!this.isValid;this.input.setAttribute("aria-invalid",this.invalid)};t.prototype.assert=function(){var t=this,e=t.ele,i=t.validOptions,n=t.input,s=t.regex,r=t.checked;if(n.type==="file"&&a.isNullOrEmpty(n.value)){return}var l=this.isValid;this.isValid=this.disabled?true:a.isBool(r)?n.checked===r:h(s,n.value,i,e)&&this.validationMethod(n.value);this.invalid=!this.isValid;n.setAttribute("aria-invalid",this.invalid);if(a.isFalse(l)&&this.isValid){this.didValidate.emit(this.isValid)}return this.isValid};t.prototype.componentWillLoad=function(){var t=this;this.input=document.getElementById(this.for);if(a.exists(this.input)){this.ele=document.getElementById(this.element)||document.querySelector(this.element);this.validOptions=a.exists(this.values)?this.values.split(","):this.ele&&this.ele.nodeName==="DATALIST"&&[].slice.call(this.ele.querySelectorAll("option")).map((function(t){return t.value}));var e=this.input.getAttribute("aria-describedby");var i=this.host.getAttribute("id")||l.uid();this.host.setAttribute("id",i);if(a.isNullOrEmpty(e)){this.input.setAttribute("aria-describedby",i)}o(0).then((function(){t.input.addEventListener("input",t.handleInput);t.input.addEventListener("change",t.handleChange);t.input.addEventListener("blur",t.handleBlur)}));if(a.isFunction(this.host.closest)){this.form=this.host.closest("form");if(this.form&&this.form.addEventListener){this.form.addEventListener("reset",this.handleReset)}}}else{console.error("ku4-validation must have a valid `for` referencing target field `id`.")}};t.prototype.disconnectedCallback=function(){if(this.input&&this.input.removeEventListener){this.input.removeEventListener("input",this.handleInput);this.input.removeEventListener("change",this.handleChange);this.input.removeEventListener("blur",this.handleBlur)}if(this.form&&this.form.removeEventListener){this.form.removeEventListener("reset",this.handleReset)}};t.prototype.render=function(){return n(s,{role:"alert","aria-live":"assertive"},n("slot",null))};Object.defineProperty(t.prototype,"host",{get:function(){return r(this)},enumerable:false,configurable:true});return t}());d.style=u}}}));