@xplortech/apollo-core 1.0.0-beta.7 → 1.0.0-beta.9

package/dist/cjs/xpl-tag.cjs.entry.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-0fdb260e.js');
+
+const XplTag = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.close = index.createEvent(this, "close", 7);
+  }
+  render() {
+    return (index.h(index.Host, { class: "xpl-tag-container" }, index.h("button", { class: "xpl-tag", onClick: () => {
+        this.close.emit();
+      } }, index.h("slot", null)), index.h("button", { class: "xpl-tag__close", onClick: () => {
+        this.close.emit();
+      } }, "\u00D7")));
+  }
+};
+
+exports.xpl_tag = XplTag;
+
+//# sourceMappingURL=xpl-tag.cjs.entry.js.map

package/dist/cjs/xpl-tag.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"xpl-tag.entry.cjs.js","mappings":";;;;;;MAKa,MAAM;;;;;EAGf,MAAM;IACF,QACIA,QAACC,UAAI,IAAC,KAAK,EAAC,mBAAmB,IAC3BD,oBACI,KAAK,EAAC,SAAS,EACf,OAAO,EAAE;QACL,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;OACrB,IAEDA,qBAAa,CACR,EACTA,oBACI,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAE;QACL,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;OACrB,aAGI,CACN,EACT;GACL;;;;;","names":["h","Host"],"sources":["./src/components/components/xpl-tag/xpl-tag.tsx"],"sourcesContent":["import { Component, Host, h, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n    tag: 'xpl-tag',\n})\nexport class XplTag {\n    @Event() close: EventEmitter;\n\n    render() {\n        return (\n            <Host class=\"xpl-tag-container\">\n                <button\n                    class=\"xpl-tag\"\n                    onClick={() => {\n                        this.close.emit();\n                    }}\n                >\n                    <slot></slot>\n                </button>\n                <button\n                    class=\"xpl-tag__close\"\n                    onClick={() => {\n                        this.close.emit();\n                    }}\n                >\n                    &times;\n                </button>\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/cjs/xpl-toggle.cjs.entry.js

@@ -2,17 +2,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-acf3dd7a.js');
-const v4 = require('./v4-14140ff3.js');
+const index = require('./index-0fdb260e.js');
+const index$1 = require('./index-318d5fc7.js');
 
 const XplToggle = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    /**
-     * The size of the toggle -- `default` or `small`
-     */
+    this.checked = undefined;
+    this.description = undefined;
+    this.disabled = undefined;
+    this.heading = undefined;
+    this.label = undefined;
+    this.name = undefined;
     this.variant = 'default';
-    this.id = v4.v4();
+    this.id = index$1.v4();
   }
   render() {
     let containerClassName = 'xpl-toggle-container';
@@ -32,3 +35,5 @@ const XplToggle = class {
 };
 
 exports.xpl_toggle = XplToggle;
+
+//# sourceMappingURL=xpl-toggle.cjs.entry.js.map

package/dist/cjs/xpl-toggle.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"xpl-toggle.entry.cjs.js","mappings":";;;;;;;MAMa,SAAS;;;;;;;;;mBAmBsB,SAAS;cAE3BA,UAAI,EAAE;;EAE5B,MAAM;IACF,IAAI,kBAAkB,GAAG,sBAAsB,CAAC;IAChD,IAAI,IAAI,CAAC,QAAQ;MACb,kBAAkB,IAAI,iCAAiC,CAAC;IAE5D,IAAI,SAAS,GAAG,YAAY,CAAC;IAC7B,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO;MAAE,SAAS,IAAI,oBAAoB,CAAC;IAEhE,QACIC,QAACC,UAAI,IAAC,KAAK,EAAE,kBAAkB,IAC1B,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW,MAC9BD,mBACI,KAAK,EAAE;QACH,WAAW,EAAE,IAAI;QACjB,qBAAqB,EAAE,IAAI,CAAC,QAAQ;OACvC,EACD,OAAO,EAAE,IAAI,CAAC,EAAE,IAEf,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,WAAW,KACbA,mBACI,KAAK,EAAE;QACH,iBAAiB,EAAE,IAAI;QACvB,2BAA2B,EAAE,IAAI,CAAC,QAAQ;OAC7C,IAEA,IAAI,CAAC,WAAW,CACb,CACX,CACG,CACX,EACDA,mBACI,KAAK,EAAE,SAAS,EAChB,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,GACV,EACR,IAAI,CAAC,KAAK,IAAIA,mBAAO,OAAO,EAAE,IAAI,CAAC,EAAE,IAAG,IAAI,CAAC,KAAK,CAAS,CACzD,EACT;GACL;;;;;","names":["uuid","h","Host"],"sources":["./src/components/components/xpl-toggle/xpl-toggle.tsx"],"sourcesContent":["import { Component, Host, h, Prop, State } from '@stencil/core';\nimport { v4 as uuid } from 'uuid';\n\n@Component({\n    tag: 'xpl-toggle',\n})\nexport class XplToggle {\n    @Prop() checked?: boolean;\n    /**\n     * The toggle's description appears *above* the toggle.\n     */\n    @Prop() description?: string;\n    @Prop() disabled?: boolean;\n    /**\n     * The toggle's heading appears *above* the toggle.\n     */\n    @Prop() heading?: string;\n    /**\n     * The toggle's label appears *to the right of* the toggle.\n     */\n    @Prop() label?: string;\n    @Prop() name?: string;\n    /**\n     * The size of the toggle -- `default` or `small`\n     */\n    @Prop() variant?: 'default' | 'small' = 'default';\n\n    @State() id: string = uuid();\n\n    render() {\n        let containerClassName = 'xpl-toggle-container';\n        if (this.disabled)\n            containerClassName += ' xpl-toggle-container--disabled';\n\n        let className = 'xpl-toggle';\n        if (this.variant === 'small') className += ' xpl-toggle--small';\n\n        return (\n            <Host class={containerClassName}>\n                {(this.heading || this.description) && (\n                    <label\n                        class={{\n                            'xpl-label': true,\n                            'xpl-label--disabled': this.disabled,\n                        }}\n                        htmlFor={this.id}\n                    >\n                        {this.heading}\n                        {this.description && (\n                            <small\n                                class={{\n                                    'xpl-description': true,\n                                    'xpl-description--disabled': this.disabled,\n                                }}\n                            >\n                                {this.description}\n                            </small>\n                        )}\n                    </label>\n                )}\n                <input\n                    class={className}\n                    type=\"checkbox\"\n                    checked={this.checked}\n                    disabled={this.disabled}\n                    id={this.id}\n                    name={this.name}\n                ></input>\n                {this.label && <label htmlFor={this.id}>{this.label}</label>}\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/cjs/xpl-utility-bar.cjs.entry.js

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-0fdb260e.js');
+
+const XplUtilityBar = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.navOpen = index.createEvent(this, "navOpen", 7);
+    this.bars = `
+        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars" class="svg-inline--fa fa-bars fa-w-14 xpl-utility-nav__bars" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg>
+    `;
+    this.navControl = undefined;
+    this.isNavOpenAtStartup = undefined;
+    this.open = true;
+  }
+  onNavToggle() {
+    this.open = !this.open;
+    this.navOpen.emit(this.open);
+  }
+  componentWillLoad() {
+    this.open =
+      this.isNavOpenAtStartup !== undefined
+        ? this.isNavOpenAtStartup
+        : this.open;
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("nav", { "aria-label": "utility navigation bar", class: "xpl-utility-bar" }, this.navControl ? (index.h("div", null, index.h("button", { class: "xpl-utility-bar__nav-control", onClick: () => this.onNavToggle(), innerHTML: `${this.bars}` }), index.h("slot", { name: "aside" }))) : (index.h("slot", { name: "aside" })), index.h("slot", { name: "main" }))));
+  }
+};
+
+exports.xpl_utility_bar = XplUtilityBar;
+
+//# sourceMappingURL=xpl-utility-bar.cjs.entry.js.map

package/dist/cjs/xpl-utility-bar.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"xpl-utility-bar.entry.cjs.js","mappings":";;;;;;MAaa,aAAa;;;;IAuBd,SAAI,GAAG;;KAEd,CAAC;;;gBATuB,IAAI;;EAErB,WAAW;IACf,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;IACvB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAChC;EAMD,iBAAiB;IACb,IAAI,CAAC,IAAI;MACL,IAAI,CAAC,kBAAkB,KAAK,SAAS;UAC/B,IAAI,CAAC,kBAAkB;UACvB,IAAI,CAAC,IAAI,CAAC;GACvB;EAED,MAAM;IACF,QACIA,QAACC,UAAI,QACDD,+BACe,wBAAwB,EACnC,KAAK,EAAC,iBAAiB,IAEtB,IAAI,CAAC,UAAU,IACZA,qBACIA,oBACI,KAAK,EAAC,8BAA8B,EACpC,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EACjC,SAAS,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,GACnB,EACVA,kBAAM,IAAI,EAAC,OAAO,GAAQ,CACxB,KAENA,kBAAM,IAAI,EAAC,OAAO,GAAQ,CAC7B,EACDA,kBAAM,IAAI,EAAC,MAAM,GAAQ,CACvB,CACH,EACT;GACL;;;;;","names":["h","Host"],"sources":["./src/components/components/xpl-utility-bar/xpl-utility-bar.tsx"],"sourcesContent":["import {\n    Component,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n    State,\n} from '@stencil/core';\n\n@Component({\n    tag: 'xpl-utility-bar',\n})\nexport class XplUtilityBar {\n    /**\n     * @event {boolean} - Emits the desired state of the navigation bar (open: true/false)\n     */\n    @Event() navOpen: EventEmitter<boolean>;\n\n    /**\n     * @property {boolean} - whether or not to show the bars to control the state of the navigation bar (open/close)\n     */\n    @Prop() navControl?: boolean;\n\n    /**\n     * @property {boolean} - Optional property that defines whether or not the main nav is open at startup.\n     */\n    @Prop() isNavOpenAtStartup?: boolean;\n\n    @State() open: boolean = true;\n\n    private onNavToggle() {\n        this.open = !this.open;\n        this.navOpen.emit(this.open);\n    }\n\n    private bars = `\n        <svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"fas\" data-icon=\"bars\" class=\"svg-inline--fa fa-bars fa-w-14 xpl-utility-nav__bars\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><path fill=\"currentColor\" d=\"M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z\"></path></svg>\n    `;\n\n    componentWillLoad() {\n        this.open =\n            this.isNavOpenAtStartup !== undefined\n                ? this.isNavOpenAtStartup\n                : this.open;\n    }\n\n    render() {\n        return (\n            <Host>\n                <nav\n                    aria-label=\"utility navigation bar\"\n                    class=\"xpl-utility-bar\"\n                >\n                    {this.navControl ? (\n                        <div>\n                            <button\n                                class=\"xpl-utility-bar__nav-control\"\n                                onClick={() => this.onNavToggle()}\n                                innerHTML={`${this.bars}`}\n                            ></button>\n                            <slot name=\"aside\"></slot>\n                        </div>\n                    ) : (\n                        <slot name=\"aside\"></slot>\n                    )}\n                    <slot name=\"main\"></slot>\n                </nav>\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/collection/collection-manifest.json

@@ -33,8 +33,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.8.0",
-    "typescriptVersion": "4.2.3"
+    "version": "3.1.0",
+    "typescriptVersion": "4.9.5"
   },
   "collections": [],
   "bundles": []

package/dist/collection/components/xpl-application-shell/xpl-application-shell.js

@@ -1,21 +1,10 @@
-import { Component, h, Host, Listen, Prop, State } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 export class XplApplicationShell {
   constructor() {
-    /**
-     * @property {boolean} - Whether or not the Grid should have space for a secondary (sub) navigation bar
-     */
     this.withSubnav = false;
-    /**
-     * @property {boolean} - Whether or not the Grid should have space for a utility bar
-     */
     this.withUtility = true;
-    /**
-     * @property {string} - The width of the main navigation bar, can be passed or updated when nav-width event is emitted.
-     */
     this.navWidth = 'default';
-    /**
-     * @state {boolean} - Whether or not the main nav is open, updates when the nav-open event is emitted.
-     */
+    this.isNavOpenAtStartup = undefined;
     this.navOpen = true;
   }
   closeNavOnMobile() {
@@ -49,128 +38,126 @@ export class XplApplicationShell {
     navClasses += this.navOpen
       ? ` xpl-application-shell__nav--${this.navWidth}--open`
       : ` xpl-application-shell__nav--${this.navWidth}`;
-    return (h(Host, { class: applicationShellClasses },
-      h("div", { class: navClasses },
-        h("slot", { name: "nav" })),
-      h("div", { class: "xpl-application-shell__subnav" },
-        h("slot", { name: "subnav" })),
-      h("div", { class: "xpl-application-shell__utility" },
-        h("slot", { name: "utility" })),
-      h("div", { class: "xpl-application-shell__content" },
-        h("slot", { name: "content" })),
-      h("xpl-backdrop", { onClick: () => this.navToggleHandler(), class: {
-          'xpl-application-shell__backdrop--open': this.navOpen,
-        }, relative: true })));
+    return (h(Host, { class: applicationShellClasses }, h("div", { class: navClasses }, h("slot", { name: "nav" })), h("div", { class: "xpl-application-shell__subnav" }, h("slot", { name: "subnav" })), h("div", { class: "xpl-application-shell__utility" }, h("slot", { name: "utility" })), h("div", { class: "xpl-application-shell__content" }, h("slot", { name: "content" })), h("xpl-backdrop", { onClick: () => this.navToggleHandler(), class: {
+        'xpl-application-shell__backdrop--open': this.navOpen,
+      }, relative: true })));
   }
   static get is() { return "xpl-application-shell"; }
-  static get properties() { return {
-    "withSubnav": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+  static get properties() {
+    return {
+      "withSubnav": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "property",
+              "text": "{boolean} - Whether or not the Grid should have space for a secondary (sub) navigation bar"
+            }],
+          "text": ""
+        },
+        "attribute": "with-subnav",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "{boolean} - Whether or not the Grid should have space for a secondary (sub) navigation bar",
-            "name": "property"
-          }],
-        "text": ""
+      "withUtility": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "property",
+              "text": "{boolean} - Whether or not the Grid should have space for a utility bar"
+            }],
+          "text": ""
+        },
+        "attribute": "with-utility",
+        "reflect": false,
+        "defaultValue": "true"
       },
-      "attribute": "with-subnav",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "withUtility": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "navWidth": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "property",
+              "text": "{string} - The width of the main navigation bar, can be passed or updated when nav-width event is emitted."
+            }],
+          "text": ""
+        },
+        "attribute": "nav-width",
+        "reflect": false,
+        "defaultValue": "'default'"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "{boolean} - Whether or not the Grid should have space for a utility bar",
-            "name": "property"
-          }],
-        "text": ""
-      },
-      "attribute": "with-utility",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "navWidth": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "{string} - The width of the main navigation bar, can be passed or updated when nav-width event is emitted.",
-            "name": "property"
-          }],
-        "text": ""
-      },
-      "attribute": "nav-width",
-      "reflect": false,
-      "defaultValue": "'default'"
-    },
-    "isNavOpenAtStartup": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "{boolean} - *",
-            "name": "property"
-          }, {
-            "text": "{boolean} - Optional property that defines whether or not the main nav is open at startup.",
-            "name": "property"
-          }],
-        "text": ""
-      },
-      "attribute": "is-nav-open-at-startup",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "navOpen": {}
-  }; }
-  static get listeners() { return [{
-      "name": "navOpen",
-      "method": "navToggleHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "navWidth",
-      "method": "navWithHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "resize",
-      "method": "onWindowResize",
-      "target": "window",
-      "capture": false,
-      "passive": true
-    }]; }
+      "isNavOpenAtStartup": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "property",
+              "text": "{boolean} - *"
+            }, {
+              "name": "property",
+              "text": "{boolean} - Optional property that defines whether or not the main nav is open at startup."
+            }],
+          "text": ""
+        },
+        "attribute": "is-nav-open-at-startup",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "navOpen": {}
+    };
+  }
+  static get listeners() {
+    return [{
+        "name": "navOpen",
+        "method": "navToggleHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "navWidth",
+        "method": "navWithHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "resize",
+        "method": "onWindowResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
 }
+//# sourceMappingURL=xpl-application-shell.js.map

package/dist/collection/components/xpl-application-shell/xpl-application-shell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xpl-application-shell.js","sourceRoot":"","sources":["../../../../src/components/components/xpl-application-shell/xpl-application-shell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAKxE,MAAM,OAAO,mBAAmB;;sBAUE,KAAK;uBAIJ,IAAI;oBAKR,SAAS;;mBAUR,IAAI;;EA5BxB,gBAAgB;IACpB,IAAI,MAAM,CAAC,UAAU,IAAI,GAAG,EAAE;MAC1B,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;KACxB;EACL,CAAC;EA2BD,gBAAgB;IACZ,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;EACjC,CAAC;EAGD,cAAc,CAAC,KAAK;IAChB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC;EACjC,CAAC;EAGD,cAAc;IACV,IAAI,CAAC,gBAAgB,EAAE,CAAC;EAC5B,CAAC;EAED,iBAAiB;IACb,IAAI,CAAC,gBAAgB,EAAE,CAAC;EAC5B,CAAC;EAED,iBAAiB;IACb,IAAI,CAAC,OAAO;MACR,IAAI,CAAC,kBAAkB,KAAK,SAAS;QACjC,CAAC,CAAC,IAAI,CAAC,kBAAkB;QACzB,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC;EAC3B,CAAC;EAED,MAAM;IACF,IAAI,uBAAuB,GAAG,uBAAuB,CAAC;IACtD,IAAI,IAAI,CAAC,WAAW;MAChB,uBAAuB,IAAI,sCAAsC,CAAC;IAEtE,IAAI,UAAU,GAAG,4BAA4B,CAAC;IAC9C,UAAU,IAAI,IAAI,CAAC,OAAO;MACtB,CAAC,CAAC,gCAAgC,IAAI,CAAC,QAAQ,QAAQ;MACvD,CAAC,CAAC,gCAAgC,IAAI,CAAC,QAAQ,EAAE,CAAC;IAEtD,OAAO,CACH,EAAC,IAAI,IAAC,KAAK,EAAE,uBAAuB;MAChC,WAAK,KAAK,EAAE,UAAU;QAClB,YAAM,IAAI,EAAC,KAAK,GAAQ,CACtB;MACN,WAAK,KAAK,EAAC,+BAA+B;QACtC,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACzB;MACN,WAAK,KAAK,EAAC,gCAAgC;QACvC,YAAM,IAAI,EAAC,SAAS,GAAQ,CAC1B;MACN,WAAK,KAAK,EAAC,gCAAgC;QACvC,YAAM,IAAI,EAAC,SAAS,GAAQ,CAC1B;MACN,oBACI,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,EACtC,KAAK,EAAE;UACH,uCAAuC,EAAE,IAAI,CAAC,OAAO;SACxD,EACD,QAAQ,SACI,CACb,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Host, Listen, Prop, State } from '@stencil/core';\n\n@Component({\n    tag: 'xpl-application-shell',\n})\nexport class XplApplicationShell {\n    private closeNavOnMobile() {\n        if (window.innerWidth <= 640) {\n            this.navOpen = false;\n        }\n    }\n\n    /**\n     * @property {boolean} - Whether or not the Grid should have space for a secondary (sub) navigation bar\n     */\n    @Prop() withSubnav: boolean = false;\n    /**\n     * @property {boolean} - Whether or not the Grid should have space for a utility bar\n     */\n    @Prop() withUtility: boolean = true;\n\n    /**\n     * @property {string} - The width of the main navigation bar, can be passed or updated when nav-width event is emitted.\n     */\n    @Prop() navWidth: string = 'default';\n\n    /**\n     * @property {boolean} - * @property {boolean} - Optional property that defines whether or not the main nav is open at startup.\n     */\n    @Prop() isNavOpenAtStartup: boolean;\n\n    /**\n     * @state {boolean} - Whether or not the main nav is open, updates when the nav-open event is emitted.\n     */\n    @State() navOpen: boolean = true;\n\n    @Listen('navOpen')\n    navToggleHandler() {\n        this.navOpen = !this.navOpen;\n    }\n\n    @Listen('navWidth')\n    navWithHandler(event) {\n        this.navWidth = event.detail;\n    }\n\n    @Listen('resize', { target: 'window' })\n    onWindowResize() {\n        this.closeNavOnMobile();\n    }\n\n    connectedCallback() {\n        this.closeNavOnMobile();\n    }\n\n    componentWillLoad() {\n        this.navOpen =\n            this.isNavOpenAtStartup !== undefined\n                ? this.isNavOpenAtStartup\n                : this.navOpen;\n    }\n\n    render() {\n        let applicationShellClasses = 'xpl-application-shell';\n        if (this.withUtility)\n            applicationShellClasses += ' xpl-application-shell--with_utility';\n\n        let navClasses = 'xpl-application-shell__nav';\n        navClasses += this.navOpen\n            ? ` xpl-application-shell__nav--${this.navWidth}--open`\n            : ` xpl-application-shell__nav--${this.navWidth}`;\n\n        return (\n            <Host class={applicationShellClasses}>\n                <div class={navClasses}>\n                    <slot name=\"nav\"></slot>\n                </div>\n                <div class=\"xpl-application-shell__subnav\">\n                    <slot name=\"subnav\"></slot>\n                </div>\n                <div class=\"xpl-application-shell__utility\">\n                    <slot name=\"utility\"></slot>\n                </div>\n                <div class=\"xpl-application-shell__content\">\n                    <slot name=\"content\"></slot>\n                </div>\n                <xpl-backdrop\n                    onClick={() => this.navToggleHandler()}\n                    class={{\n                        'xpl-application-shell__backdrop--open': this.navOpen,\n                    }}\n                    relative\n                ></xpl-backdrop>\n            </Host>\n        );\n    }\n}\n"]}