@shoper/phoenix_design_system 0.2.1 → 0.2.2-2

package/build/cjs/packages/phoenix/src/core/phoenix_light_lit_element.js

@@ -2,13 +2,46 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var tslib_es6 = require('../../../../external/tslib/tslib.es6.js');
 var lit = require('lit');
+var phoenix_light_lit_elements_constants = require('./phoenix_light_lit_elements_constants.js');
+var decorators = require('lit/decorators');
 
 class PhoenixLightLitElement extends lit.LitElement {
+    constructor() {
+        super();
+        this._slots = {};
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._slots = this._assignSlots();
+    }
+    _assignSlots() {
+        return [...this.querySelectorAll('[slot]')].reduce((acc, $el) => {
+            var _a;
+            const slotName = $el.slot || phoenix_light_lit_elements_constants.DEFAULT_SLOT_NAME;
+            acc[slotName] = acc[slotName] || [];
+            acc[slotName].push(lit.html `${$el}`);
+            (_a = $el.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild($el);
+            $el.removeAttribute('slot');
+            return acc;
+        }, this._slots);
+    }
+    getSlot(name) {
+        try {
+            return this._slots[name];
+        }
+        catch (_a) { }
+        return lit.nothing;
+    }
     createRenderRoot() {
         return this;
     }
-}
+}
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", Object)
+], PhoenixLightLitElement.prototype, "_slots", void 0);
 
 exports.PhoenixLightLitElement = PhoenixLightLitElement;
 //# sourceMappingURL=phoenix_light_lit_element.js.map

package/build/cjs/packages/phoenix/src/core/phoenix_light_lit_element.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,yCAA6C;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/core/phoenix_light_lit_elements_constants.js

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const DEFAULT_SLOT_NAME = 'default';
+
+exports.DEFAULT_SLOT_NAME = DEFAULT_SLOT_NAME;
+//# sourceMappingURL=phoenix_light_lit_elements_constants.js.map

package/build/cjs/packages/phoenix/src/core/phoenix_light_lit_elements_constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/index.js

@@ -6,8 +6,14 @@ var context_provider_controller = require('./core/context/context_provider_contr
 var context_consumer_controller = require('./core/context/context_consumer_controller.js');
 var phoenix_light_lit_element = require('./core/phoenix_light_lit_element.js');
 var hello_button = require('./hello_button.js');
-var portal = require('./components/portal/portal.js');
 var portal_target = require('./components/portal/portal_target.js');
+var portal = require('./components/portal/portal.js');
+var modal = require('./components/modal/modal.js');
+var modal_backdrop = require('./components/modal/modal_backdrop.js');
+var modal_body = require('./components/modal/modal_body.js');
+var modal_footer = require('./components/modal/modal_footer.js');
+var modal_header = require('./components/modal/modal_header.js');
+var modal_close = require('./components/modal/modal_close.js');
 
 
 
@@ -20,16 +26,52 @@ Object.defineProperty(exports, 'HelloButton', {
 		return hello_button.HelloButton;
 	}
 });
+Object.defineProperty(exports, 'HPortalTarget', {
+	enumerable: true,
+	get: function () {
+		return portal_target.HPortalTarget;
+	}
+});
 Object.defineProperty(exports, 'HPortal', {
 	enumerable: true,
 	get: function () {
 		return portal.HPortal;
 	}
 });
-Object.defineProperty(exports, 'HPortalTarget', {
+Object.defineProperty(exports, 'HModal', {
 	enumerable: true,
 	get: function () {
-		return portal_target.HPortalTarget;
+		return modal.HModal;
+	}
+});
+Object.defineProperty(exports, 'HModalBackdrop', {
+	enumerable: true,
+	get: function () {
+		return modal_backdrop.HModalBackdrop;
+	}
+});
+Object.defineProperty(exports, 'HModalBody', {
+	enumerable: true,
+	get: function () {
+		return modal_body.HModalBody;
+	}
+});
+Object.defineProperty(exports, 'HModalFooter', {
+	enumerable: true,
+	get: function () {
+		return modal_footer.HModalFooter;
+	}
+});
+Object.defineProperty(exports, 'HModalHeader', {
+	enumerable: true,
+	get: function () {
+		return modal_header.HModalHeader;
+	}
+});
+Object.defineProperty(exports, 'HModalClose', {
+	enumerable: true,
+	get: function () {
+		return modal_close.HModalClose;
 	}
 });
 //# sourceMappingURL=index.js.map

package/build/cjs/packages/phoenix/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/external/lit-html/async-directive.js

@@ -0,0 +1,12 @@
+import { isSingleExpression as r$1 } from './directive-helpers.js';
+import { Directive as i, PartType as t } from './directive.js';
+export { directive } from './directive.js';
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const e=(i,t)=>{var s,o;const n=i._$AN;if(void 0===n)return !1;for(const i of n)null===(o=(s=i)._$AO)||void 0===o||o.call(s,t,!1),e(i,t);return !0},o=i=>{let t,s;do{if(void 0===(t=i._$AM))break;s=t._$AN,s.delete(i),i=t;}while(0===(null==s?void 0:s.size))},n=i=>{for(let t;t=i._$AM;i=t){let s=t._$AN;if(void 0===s)t._$AN=s=new Set;else if(s.has(i))break;s.add(i),l(t);}};function r(i){void 0!==this._$AN?(o(this),this._$AM=i,n(this)):this._$AM=i;}function h(i,t=!1,s=0){const n=this._$AH,r=this._$AN;if(void 0!==r&&0!==r.size)if(t)if(Array.isArray(n))for(let i=s;i<n.length;i++)e(n[i],!1),o(n[i]);else null!=n&&(e(n,!1),o(n));else e(this,i);}const l=i=>{var t$1,e,o,n;i.type==t.CHILD&&(null!==(t$1=(o=i)._$AP)&&void 0!==t$1||(o._$AP=h),null!==(e=(n=i)._$AQ)&&void 0!==e||(n._$AQ=r));};class d extends i{constructor(){super(...arguments),this._$AN=void 0;}_$AT(i,t,s){super._$AT(i,t,s),n(this),this.isConnected=i._$AU;}_$AO(i,t=!0){var s,n;i!==this.isConnected&&(this.isConnected=i,i?null===(s=this.reconnected)||void 0===s||s.call(this):null===(n=this.disconnected)||void 0===n||n.call(this)),t&&(e(this,i),o(this));}setValue(t){if(r$1(this._$Ct))this._$Ct._$AI(t,this);else {const i=[...this._$Ct._$AH];i[this._$Ci]=t,this._$Ct._$AI(i,this,0);}}disconnected(){}reconnected(){}}
+
+export { d as AsyncDirective };
+//# sourceMappingURL=async-directive.js.map

package/build/esm/external/lit-html/async-directive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/external/lit-html/directive-helpers.js

@@ -0,0 +1,10 @@
+import './lit-html.js';
+
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const r=o=>void 0===o.strings;
+
+export { r as isSingleExpression };
+//# sourceMappingURL=directive-helpers.js.map

package/build/esm/external/lit-html/directive-helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/external/lit-html/directive.js

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e=t=>(...e)=>({_$litDirective$:t,values:e});class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}
+
+export { i as Directive, t as PartType, e as directive };
+//# sourceMappingURL=directive.js.map

package/build/esm/external/lit-html/directive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/external/lit-html/directives/ref.js

@@ -0,0 +1,12 @@
+import { nothing as w } from '../lit-html.js';
+import { directive as e$1 } from '../directive.js';
+import { AsyncDirective as d } from '../async-directive.js';
+
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const e=()=>new o;class o{}const h=new WeakMap,n=e$1(class extends d{render(t){return w}update(t,[s]){var e;const o=s!==this.U;return o&&void 0!==this.U&&this.ot(void 0),(o||this.rt!==this.lt)&&(this.U=s,this.ht=null===(e=t.options)||void 0===e?void 0:e.host,this.ot(this.lt=t.element)),w}ot(i){var t;if("function"==typeof this.U){const s=null!==(t=this.ht)&&void 0!==t?t:globalThis;let e=h.get(s);void 0===e&&(e=new WeakMap,h.set(s,e)),void 0!==e.get(this.U)&&this.U.call(this.ht,void 0),e.set(this.U,i),void 0!==i&&this.U.call(this.ht,i);}else this.U.value=i;}get rt(){var i,t,s;return "function"==typeof this.U?null===(t=h.get(null!==(i=this.ht)&&void 0!==i?i:globalThis))||void 0===t?void 0:t.get(this.U):null===(s=this.U)||void 0===s?void 0:s.value}disconnected(){this.rt===this.lt&&this.ot(void 0);}reconnected(){this.ot(this.lt);}});
+
+export { e as createRef, n as ref };
+//# sourceMappingURL=ref.js.map

package/build/esm/external/lit-html/directives/ref.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/external/lit-html/lit-html.js

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+var t;const i=globalThis.trustedTypes,s=i?i.createPolicy("lit-html",{createHTML:t=>t}):void 0,e=`lit$${(Math.random()+"").slice(9)}$`,o="?"+e,n=`<${o}>`,l=document,h=(t="")=>l.createComment(t),r=t=>null===t||"object"!=typeof t&&"function"!=typeof t,d=Array.isArray,u=t=>{var i;return d(t)||"function"==typeof(null===(i=t)||void 0===i?void 0:i[Symbol.iterator])},c=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v=/-->/g,a=/>/g,f=/>|[ 	\n\r](?:([^\s"'>=/]+)([ 	\n\r]*=[ 	\n\r]*(?:[^ 	\n\r"'`<>=]|("|')|))|$)/g,_=/'/g,m=/"/g,g=/^(?:script|style|textarea|title)$/i,b=Symbol.for("lit-noChange"),w=Symbol.for("lit-nothing"),T=new WeakMap,A=l.createTreeWalker(l,129,null,!1),C=(t,i)=>{const o=t.length-1,l=[];let h,r=2===i?"<svg>":"",d=c;for(let i=0;i<o;i++){const s=t[i];let o,u,p=-1,$=0;for(;$<s.length&&(d.lastIndex=$,u=d.exec(s),null!==u);)$=d.lastIndex,d===c?"!--"===u[1]?d=v:void 0!==u[1]?d=a:void 0!==u[2]?(g.test(u[2])&&(h=RegExp("</"+u[2],"g")),d=f):void 0!==u[3]&&(d=f):d===f?">"===u[0]?(d=null!=h?h:c,p=-1):void 0===u[1]?p=-2:(p=d.lastIndex-u[2].length,o=u[1],d=void 0===u[3]?f:'"'===u[3]?m:_):d===m||d===_?d=f:d===v||d===a?d=c:(d=f,h=void 0);const y=d===f&&t[i+1].startsWith("/>")?" ":"";r+=d===c?s+n:p>=0?(l.push(o),s.slice(0,p)+"$lit$"+s.slice(p)+e+y):s+e+(-2===p?(l.push(void 0),i):y);}const u=r+(t[o]||"<?>")+(2===i?"</svg>":"");if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return [void 0!==s?s.createHTML(u):u,l]};class E{constructor({strings:t,_$litType$:s},n){let l;this.parts=[];let r=0,d=0;const u=t.length-1,c=this.parts,[v,a]=C(t,s);if(this.el=E.createElement(v,n),A.currentNode=this.el.content,2===s){const t=this.el.content,i=t.firstChild;i.remove(),t.append(...i.childNodes);}for(;null!==(l=A.nextNode())&&c.length<u;){if(1===l.nodeType){if(l.hasAttributes()){const t=[];for(const i of l.getAttributeNames())if(i.endsWith("$lit$")||i.startsWith(e)){const s=a[d++];if(t.push(i),void 0!==s){const t=l.getAttribute(s.toLowerCase()+"$lit$").split(e),i=/([.?@])?(.*)/.exec(s);c.push({type:1,index:r,name:i[2],strings:t,ctor:"."===i[1]?M:"?"===i[1]?H:"@"===i[1]?I:S});}else c.push({type:6,index:r});}for(const i of t)l.removeAttribute(i);}if(g.test(l.tagName)){const t=l.textContent.split(e),s=t.length-1;if(s>0){l.textContent=i?i.emptyScript:"";for(let i=0;i<s;i++)l.append(t[i],h()),A.nextNode(),c.push({type:2,index:++r});l.append(t[s],h());}}}else if(8===l.nodeType)if(l.data===o)c.push({type:2,index:r});else {let t=-1;for(;-1!==(t=l.data.indexOf(e,t+1));)c.push({type:7,index:r}),t+=e.length-1;}r++;}}static createElement(t,i){const s=l.createElement("template");return s.innerHTML=t,s}}function P(t,i,s=t,e){var o,n,l,h;if(i===b)return i;let d=void 0!==e?null===(o=s._$Cl)||void 0===o?void 0:o[e]:s._$Cu;const u=r(i)?void 0:i._$litDirective$;return (null==d?void 0:d.constructor)!==u&&(null===(n=null==d?void 0:d._$AO)||void 0===n||n.call(d,!1),void 0===u?d=void 0:(d=new u(t),d._$AT(t,s,e)),void 0!==e?(null!==(l=(h=s)._$Cl)&&void 0!==l?l:h._$Cl=[])[e]=d:s._$Cu=d),void 0!==d&&(i=P(t,d._$AS(t,i.values),d,e)),i}class V{constructor(t,i){this.v=[],this._$AN=void 0,this._$AD=t,this._$AM=i;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}p(t){var i;const{el:{content:s},parts:e}=this._$AD,o=(null!==(i=null==t?void 0:t.creationScope)&&void 0!==i?i:l).importNode(s,!0);A.currentNode=o;let n=A.nextNode(),h=0,r=0,d=e[0];for(;void 0!==d;){if(h===d.index){let i;2===d.type?i=new N(n,n.nextSibling,this,t):1===d.type?i=new d.ctor(n,d.name,d.strings,this,t):6===d.type&&(i=new L(n,this,t)),this.v.push(i),d=e[++r];}h!==(null==d?void 0:d.index)&&(n=A.nextNode(),h++);}return o}m(t){let i=0;for(const s of this.v)void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}}class N{constructor(t,i,s,e){var o;this.type=2,this._$AH=w,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cg=null===(o=null==e?void 0:e.isConnected)||void 0===o||o;}get _$AU(){var t,i;return null!==(i=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==i?i:this._$Cg}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=P(this,t,i),r(t)?t===w||null==t||""===t?(this._$AH!==w&&this._$AR(),this._$AH=w):t!==this._$AH&&t!==b&&this.$(t):void 0!==t._$litType$?this.T(t):void 0!==t.nodeType?this.k(t):u(t)?this.S(t):this.$(t);}M(t,i=this._$AB){return this._$AA.parentNode.insertBefore(t,i)}k(t){this._$AH!==t&&(this._$AR(),this._$AH=this.M(t));}$(t){this._$AH!==w&&r(this._$AH)?this._$AA.nextSibling.data=t:this.k(l.createTextNode(t)),this._$AH=t;}T(t){var i;const{values:s,_$litType$:e}=t,o="number"==typeof e?this._$AC(t):(void 0===e.el&&(e.el=E.createElement(e.h,this.options)),e);if((null===(i=this._$AH)||void 0===i?void 0:i._$AD)===o)this._$AH.m(s);else {const t=new V(o,this),i=t.p(this.options);t.m(s),this.k(i),this._$AH=t;}}_$AC(t){let i=T.get(t.strings);return void 0===i&&T.set(t.strings,i=new E(t)),i}S(t){d(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const o of t)e===i.length?i.push(s=new N(this.M(h()),this.M(h()),this,this.options)):s=i[e],s._$AI(o),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,i){var s;for(null===(s=this._$AP)||void 0===s||s.call(this,!1,!0,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i;}}setConnected(t){var i;void 0===this._$AM&&(this._$Cg=t,null===(i=this._$AP)||void 0===i||i.call(this,t));}}class S{constructor(t,i,s,e,o){this.type=1,this._$AH=w,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=o,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=w;}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,i=this,s,e){const o=this.strings;let n=!1;if(void 0===o)t=P(this,t,i,0),n=!r(t)||t!==this._$AH&&t!==b,n&&(this._$AH=t);else {const e=t;let l,h;for(t=o[0],l=0;l<o.length-1;l++)h=P(this,e[s+l],i,l),h===b&&(h=this._$AH[l]),n||(n=!r(h)||h!==this._$AH[l]),h===w?t=w:t!==w&&(t+=(null!=h?h:"")+o[l+1]),this._$AH[l]=h;}n&&!e&&this.C(t);}C(t){t===w?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"");}}class M extends S{constructor(){super(...arguments),this.type=3;}C(t){this.element[this.name]=t===w?void 0:t;}}const k=i?i.emptyScript:"";class H extends S{constructor(){super(...arguments),this.type=4;}C(t){t&&t!==w?this.element.setAttribute(this.name,k):this.element.removeAttribute(this.name);}}class I extends S{constructor(t,i,s,e,o){super(t,i,s,e,o),this.type=5;}_$AI(t,i=this){var s;if((t=null!==(s=P(this,t,i,0))&&void 0!==s?s:w)===b)return;const e=this._$AH,o=t===w&&e!==w||t.capture!==e.capture||t.once!==e.once||t.passive!==e.passive,n=t!==w&&(e===w||o);o&&this.element.removeEventListener(this.name,this,e),n&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){var i,s;"function"==typeof this._$AH?this._$AH.call(null!==(s=null===(i=this.options)||void 0===i?void 0:i.host)&&void 0!==s?s:this.element,t):this._$AH.handleEvent(t);}}class L{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s;}get _$AU(){return this._$AM._$AU}_$AI(t){P(this,t);}}const z=window.litHtmlPolyfillSupport;null==z||z(E,N),(null!==(t=globalThis.litHtmlVersions)&&void 0!==t?t:globalThis.litHtmlVersions=[]).push("2.2.5");
+
+export { b as noChange, w as nothing };
+//# sourceMappingURL=lit-html.js.map

package/build/esm/external/lit-html/lit-html.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/modal/modal.d.ts

@@ -0,0 +1,31 @@
+import { TemplateResult } from 'lit';
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
+export declare class HModal extends PhoenixLightLitElement {
+    opened: boolean;
+    customClass: string;
+    transition: string;
+    _firstFocusableElement: HTMLElement | undefined;
+    _focusableElements: HTMLElement[] | null;
+    _lastFocusableElement: HTMLElement | undefined;
+    private _contentRef;
+    private _focusSentinelStart;
+    private _focusSentinelEnd;
+    private _propsChangeStrategies;
+    private static openModals;
+    private static _appendModalsPortal;
+    private static _appendModalsBackdrop;
+    static isSomeModalOpen(): boolean;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    updated(changedProps: Map<string, any>): void;
+    private _keepFocusWithinModal;
+    private _handleCloseFromCloseComponent;
+    private _bindCloseOnEsc;
+    open(): void;
+    private _dispatchModalOpenedEvent;
+    close(): void;
+    private _dispatchModalClosedEvent;
+    render(): TemplateResult<1>;
+}

package/build/esm/packages/phoenix/src/components/modal/modal.js

@@ -0,0 +1,204 @@
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { html } from 'lit';
+import { property, state, customElement } from 'lit/decorators';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
+import { PORTAL_TARGET_NAME_PROP } from '../portal/portal_constants.js';
+import { MODAL_OPENED_PROP, FOCUSABLE_ELEMENTS_WITHIN_MODAL, MODALS_PORTAL_NAME, MODAL_EVENTS } from './modal_constants.js';
+import { createRef as e, ref as n } from '../../../../../external/lit-html/directives/ref.js';
+
+var HModal_1;
+let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.opened = false;
+        this.customClass = '';
+        this.transition = 'slide-in-top';
+        this._firstFocusableElement = undefined;
+        this._focusableElements = null;
+        this._lastFocusableElement = undefined;
+        this._contentRef = e();
+        this._focusSentinelStart = e();
+        this._focusSentinelEnd = e();
+        this._propsChangeStrategies = {
+            [MODAL_OPENED_PROP]: {
+                true: () => {
+                    const scrollY = window.scrollY;
+                    HModal_1.openModals = [...HModal_1.openModals, this];
+                    document.addEventListener('keydown', this._bindCloseOnEsc);
+                    setTimeout(() => {
+                        var _a;
+                        (_a = this._firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
+                        window.scrollTo(0, scrollY);
+                    }, 0);
+                },
+                false: () => {
+                    HModal_1.openModals = HModal_1.openModals.filter((modal) => modal !== this);
+                    document.removeEventListener('keydown', this._bindCloseOnEsc);
+                }
+            }
+        };
+        this._keepFocusWithinModal = (ev) => {
+            var _a, _b;
+            const isTabPressed = ev.code === 'Tab';
+            if (isTabPressed) {
+                if (ev.shiftKey) {
+                    if (document.activeElement === this._firstFocusableElement) {
+                        (_a = this._lastFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
+                        ev.preventDefault();
+                    }
+                }
+                else if (document.activeElement === this._lastFocusableElement) {
+                    (_b = this._firstFocusableElement) === null || _b === void 0 ? void 0 : _b.focus();
+                    ev.preventDefault();
+                }
+            }
+        };
+        this._handleCloseFromCloseComponent = (ev) => {
+            var _a;
+            ev.stopPropagation();
+            if ((_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.contains(ev.target)) {
+                this.close();
+            }
+        };
+        this._bindCloseOnEsc = (ev) => {
+            ev.stopImmediatePropagation();
+            const closeConditions = [ev.key === 'Escape', ev.ctrlKey === false, ev.shiftKey === false, ev.altKey === false];
+            const shouldCloseModal = closeConditions.every((condition) => condition);
+            if (shouldCloseModal) {
+                const [modalToClose] = HModal_1.openModals.slice(-1);
+                modalToClose === null || modalToClose === void 0 ? void 0 : modalToClose.close();
+            }
+        };
+        this.hidden = true;
+        this._focusableElements = [...this.querySelectorAll(FOCUSABLE_ELEMENTS_WITHIN_MODAL)];
+    }
+    static _appendModalsPortal() {
+        const $modalsPortalTarget = document.querySelector(`h-portal-target[name="${MODALS_PORTAL_NAME}"]`);
+        if (!$modalsPortalTarget) {
+            const $portalTarget = document.createElement('h-portal-target');
+            $portalTarget.setAttribute(PORTAL_TARGET_NAME_PROP, MODALS_PORTAL_NAME);
+            document.body.appendChild($portalTarget);
+        }
+    }
+    static _appendModalsBackdrop() {
+        const $modalsBackdrop = document.querySelector('h-modal-backdrop');
+        if (!$modalsBackdrop) {
+            const $backdrop = document.createElement('h-modal-backdrop');
+            document.body.appendChild($backdrop);
+        }
+    }
+    static isSomeModalOpen() {
+        return HModal_1.openModals.some((modal) => modal.opened);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        HModal_1._appendModalsPortal();
+        HModal_1._appendModalsBackdrop();
+        document.addEventListener('keydown', this._keepFocusWithinModal);
+        document.addEventListener(MODAL_EVENTS.close, this._handleCloseFromCloseComponent);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener(MODAL_EVENTS.close, this._handleCloseFromCloseComponent);
+        document.removeEventListener('keydown', this._bindCloseOnEsc);
+    }
+    firstUpdated() {
+        this._firstFocusableElement = this._focusSentinelStart.value;
+        this._lastFocusableElement = this._focusSentinelEnd.value;
+    }
+    updated(changedProps) {
+        if (changedProps.has(MODAL_OPENED_PROP)) {
+            this._propsChangeStrategies[MODAL_OPENED_PROP][String(this[MODAL_OPENED_PROP])]();
+        }
+    }
+    open() {
+        var _a;
+        if (!this[MODAL_OPENED_PROP]) {
+            this[MODAL_OPENED_PROP] = true;
+            (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.add(`modal_visible`, `modal_show-${this.transition}-start`);
+            window.requestAnimationFrame(() => {
+                setTimeout(() => {
+                    var _a;
+                    (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.add(`modal_show-${this.transition}-end`);
+                }, 0);
+                const transitionDuration = parseFloat(getComputedStyle(this._contentRef.value || this).transitionDuration) * 1000;
+                setTimeout(() => {
+                    var _a;
+                    (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_show-${this.transition}-start`, `modal_show-${this.transition}-end`);
+                    this._dispatchModalOpenedEvent();
+                }, transitionDuration);
+            });
+        }
+    }
+    _dispatchModalOpenedEvent() {
+        const openModalEvent = new CustomEvent(MODAL_EVENTS.opened, {
+            bubbles: true
+        });
+        this.dispatchEvent(openModalEvent);
+    }
+    close() {
+        if (this[MODAL_OPENED_PROP]) {
+            const transitionDuration = parseFloat(getComputedStyle(this._contentRef.value || this).transitionDuration) * 1000;
+            window.requestAnimationFrame(() => {
+                var _a, _b;
+                (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_hide-${this.transition}-start`);
+                (_b = this._contentRef.value) === null || _b === void 0 ? void 0 : _b.classList.add(`modal_hide-${this.transition}-end`);
+                setTimeout(() => {
+                    var _a;
+                    (_a = this._contentRef.value) === null || _a === void 0 ? void 0 : _a.classList.remove(`modal_hide-${this.transition}-start`, `modal_hide-${this.transition}-end`);
+                    this[MODAL_OPENED_PROP] = false;
+                    this._dispatchModalClosedEvent();
+                }, transitionDuration);
+            });
+        }
+    }
+    _dispatchModalClosedEvent() {
+        const closeModalEvent = new CustomEvent(MODAL_EVENTS.closed, {
+            bubbles: true
+        });
+        this.dispatchEvent(closeModalEvent);
+    }
+    render() {
+        return html `
+            <h-portal ?disabled="${!this.opened}" to="${MODALS_PORTAL_NAME}" hidden>
+                <div tabindex="0" ${n(this._focusSentinelStart)}></div>
+                <div ${n(this._contentRef)} class="modal ${this.customClass}" role="dialog">
+                    <div class="modal__container">${this.getSlot('header')} ${this.getSlot('default')} ${this.getSlot('footer')}</div>
+                </div>
+                <div tabindex="0" ${n(this._focusSentinelEnd)}></div>
+            </h-portal>
+        `;
+    }
+};
+HModal.openModals = [];
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], HModal.prototype, "opened", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], HModal.prototype, "customClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], HModal.prototype, "transition", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], HModal.prototype, "_firstFocusableElement", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], HModal.prototype, "_focusableElements", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], HModal.prototype, "_lastFocusableElement", void 0);
+HModal = HModal_1 = __decorate([
+    customElement('h-modal'),
+    __metadata("design:paramtypes", [])
+], HModal);
+
+export { HModal };
+//# sourceMappingURL=modal.js.map

package/build/esm/packages/phoenix/src/components/modal/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA,yCAAyC,oDAAwD;AACjG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/modal/modal_backdrop.d.ts

@@ -0,0 +1,12 @@
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
+export declare class HModalBackdrop extends PhoenixLightLitElement {
+    visible: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _show;
+    private _hide;
+    protected updated(): void;
+    private _disableScrolling;
+    private _enableScrolling;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/build/esm/packages/phoenix/src/components/modal/modal_backdrop.js

@@ -0,0 +1,63 @@
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { html } from 'lit';
+import { property, customElement } from 'lit/decorators';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
+import { MODAL_EVENTS } from './modal_constants.js';
+import { HModal } from './modal.js';
+
+let HModalBackdrop = class HModalBackdrop extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.visible = false;
+        this._show = () => {
+            if (!this.visible) {
+                this.visible = true;
+            }
+        };
+        this._hide = () => {
+            if (!HModal.isSomeModalOpen()) {
+                this.visible = false;
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener(MODAL_EVENTS.opened, this._show);
+        document.addEventListener(MODAL_EVENTS.closed, this._hide);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener(MODAL_EVENTS.opened, this._show);
+        document.removeEventListener(MODAL_EVENTS.closed, this._hide);
+    }
+    updated() {
+        if (HModal.isSomeModalOpen()) {
+            this.visible = true;
+            this._disableScrolling();
+        }
+        else {
+            this._enableScrolling();
+        }
+    }
+    _disableScrolling() {
+        document.body.style.overflow = 'hidden';
+        document.body.style.paddingRight = '15px';
+    }
+    _enableScrolling() {
+        document.body.style.removeProperty('overflow');
+        document.body.style.removeProperty('padding-right');
+    }
+    render() {
+        return html `<div aria-hidden="true" ?hidden="${!this.visible}" class="modal-backdrop"></div>`;
+    }
+};
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], HModalBackdrop.prototype, "visible", void 0);
+HModalBackdrop = __decorate([
+    customElement('h-modal-backdrop')
+], HModalBackdrop);
+
+export { HModalBackdrop };
+//# sourceMappingURL=modal_backdrop.js.map

package/build/esm/packages/phoenix/src/components/modal/modal_backdrop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/modal/modal_body.d.ts

@@ -0,0 +1,4 @@
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
+export declare class HModalBody extends PhoenixLightLitElement {
+    constructor();
+}

package/build/esm/packages/phoenix/src/components/modal/modal_body.js

@@ -0,0 +1,17 @@
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { customElement } from 'lit/decorators';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
+
+let HModalBody = class HModalBody extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.slot = this.hasAttribute('slot') ? this.slot : 'default';
+    }
+};
+HModalBody = __decorate([
+    customElement('h-modal-body'),
+    __metadata("design:paramtypes", [])
+], HModalBody);
+
+export { HModalBody };
+//# sourceMappingURL=modal_body.js.map

package/build/esm/packages/phoenix/src/components/modal/modal_body.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/modal/modal_close.d.ts

@@ -0,0 +1,8 @@
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
+export declare class HModalClose extends PhoenixLightLitElement {
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _dispatchModalCloseEvent;
+    private _dispatchModalCloseOnEnterEvent;
+}

package/build/esm/packages/phoenix/src/components/modal/modal_close.js

@@ -0,0 +1,39 @@
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { customElement } from 'lit/decorators';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
+import { MODAL_EVENTS } from './modal_constants.js';
+
+let HModalClose = class HModalClose extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.tabIndex = 0;
+        this.setAttribute('role', 'button');
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this._dispatchModalCloseEvent);
+        this.addEventListener('keydown', this._dispatchModalCloseOnEnterEvent);
+    }
+    disconnectedCallback() {
+        this.removeEventListener('click', this._dispatchModalCloseEvent);
+        this.removeEventListener('keydown', this._dispatchModalCloseOnEnterEvent);
+    }
+    _dispatchModalCloseEvent() {
+        const closeModalEvent = new CustomEvent(MODAL_EVENTS.close, {
+            bubbles: true
+        });
+        this.dispatchEvent(closeModalEvent);
+    }
+    _dispatchModalCloseOnEnterEvent(ev) {
+        if (ev.code === 'Enter' || ev.code === 'Space') {
+            this._dispatchModalCloseEvent();
+        }
+    }
+};
+HModalClose = __decorate([
+    customElement('h-modal-close'),
+    __metadata("design:paramtypes", [])
+], HModalClose);
+
+export { HModalClose };
+//# sourceMappingURL=modal_close.js.map

package/build/esm/packages/phoenix/src/components/modal/modal_close.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}