@shoper/phoenix_design_system 0.2.1 → 0.2.2-2

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

@@ -0,0 +1,9 @@
+export declare const MODALS_PORTAL_NAME = "modals";
+export declare const MODAL_EVENTS: {
+    open: string;
+    close: string;
+    opened: string;
+    closed: string;
+};
+export declare const MODAL_OPENED_PROP = "opened";
+export declare const FOCUSABLE_ELEMENTS_WITHIN_MODAL = "button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])";

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

@@ -0,0 +1,12 @@
+const MODALS_PORTAL_NAME = 'modals';
+const MODAL_EVENTS = {
+    open: 'modal.open',
+    close: 'modal.close',
+    opened: 'modal.opened',
+    closed: 'modal.closed'
+};
+const MODAL_OPENED_PROP = 'opened';
+const FOCUSABLE_ELEMENTS_WITHIN_MODAL = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+
+export { FOCUSABLE_ELEMENTS_WITHIN_MODAL, MODALS_PORTAL_NAME, MODAL_EVENTS, MODAL_OPENED_PROP };
+//# sourceMappingURL=modal_constants.js.map

package/build/esm/packages/phoenix/src/components/modal/modal_constants.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/packages/phoenix/src/components/modal/modal_footer.d.ts

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

package/build/esm/packages/phoenix/src/components/modal/modal_footer.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 HModalFooter = class HModalFooter extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.slot = this.hasAttribute('slot') ? this.slot : 'footer';
+    }
+};
+HModalFooter = __decorate([
+    customElement('h-modal-footer'),
+    __metadata("design:paramtypes", [])
+], HModalFooter);
+
+export { HModalFooter };
+//# sourceMappingURL=modal_footer.js.map

package/build/esm/packages/phoenix/src/components/modal/modal_footer.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_header.d.ts

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

package/build/esm/packages/phoenix/src/components/modal/modal_header.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 HModalHeader = class HModalHeader extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.slot = this.hasAttribute('slot') ? this.slot : 'header';
+    }
+};
+HModalHeader = __decorate([
+    customElement('h-modal-header'),
+    __metadata("design:paramtypes", [])
+], HModalHeader);
+
+export { HModalHeader };
+//# sourceMappingURL=modal_header.js.map

package/build/esm/packages/phoenix/src/components/modal/modal_header.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/portal/portal.d.ts

@@ -6,7 +6,7 @@ export declare class HPortal extends PhoenixLightLitElement {
     disabled: boolean;
     constructor();
     firstUpdated(): void;
-    updated(changedProps: Map<string, any>): void;
+    updated(): void;
     disconnectedCallback(): void;
     openPortal(): void;
     closePortal(): void;

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

@@ -1,6 +1,6 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
-import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
 import { state, property, customElement } from 'lit/decorators';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
 import { PORTAL_EVENTS } from './portal_constants.js';
 import v4 from '../../../../../external/uuid/dist/esm-browser/v4.js';
 
@@ -19,12 +19,17 @@ let HPortal = class HPortal extends PhoenixLightLitElement {
             this.openPortal();
         }
     }
-    updated(changedProps) {
-        const disabledValue = changedProps.get('disabled');
-        if (disabledValue === true) {
+    updated() {
+        if (this.children.length > 0) {
+            if (!this.disabled) {
+                this._initialChildren = [...this.children];
+                this.openPortal();
+            }
+        }
+        if (this.disabled === true) {
             this.closePortal();
         }
-        else if (disabledValue === false) {
+        else if (this.disabled === false) {
             this.openPortal();
         }
     }

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA,eAAe,qDAAyD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA,eAAe,qDAAyD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/portal/portal_constants.d.ts

@@ -1,10 +1,13 @@
 import { HPortal } from './portal';
+import { HPortalTarget } from './portal_target';
 export declare const PORTAL_EVENTS: {
     open: string;
     close: string;
 };
+export declare const PORTAL_TARGET_NAME_PROP = "name";
 declare global {
     interface HTMLElementTagNameMap {
         'h-portal': HPortal;
+        'h-portal-target': HPortalTarget;
     }
 }

package/build/esm/packages/phoenix/src/components/portal/portal_constants.js

@@ -1,7 +1,8 @@
 const PORTAL_EVENTS = {
     open: `portal.open`,
     close: 'portal.close'
-};
+};
+const PORTAL_TARGET_NAME_PROP = 'name';
 
-export { PORTAL_EVENTS };
+export { PORTAL_EVENTS, PORTAL_TARGET_NAME_PROP };
 //# sourceMappingURL=portal_constants.js.map

package/build/esm/packages/phoenix/src/components/portal/portal_constants.js.map

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

package/build/esm/packages/phoenix/src/components/portal/portal_target.js

@@ -1,8 +1,8 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
-import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
 import { property, state, customElement } from 'lit/decorators';
-import { PORTAL_EVENTS } from './portal_constants.js';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
 import { PortalTargetError } from './portal_target_error.js';
+import { PORTAL_EVENTS, PORTAL_TARGET_NAME_PROP } from './portal_constants.js';
 
 var HPortalTarget_1;
 let HPortalTarget = HPortalTarget_1 = class HPortalTarget extends PhoenixLightLitElement {
@@ -44,17 +44,17 @@ let HPortalTarget = HPortalTarget_1 = class HPortalTarget extends PhoenixLightLi
         super.disconnectedCallback();
         document.removeEventListener(PORTAL_EVENTS.open, this.portalElements);
         document.removeEventListener(PORTAL_EVENTS.close, this.removeTeleportedItems);
-        HPortalTarget_1.portalTargetsNames.delete(this.name);
+        HPortalTarget_1.portalTargetsNames.delete(this[PORTAL_TARGET_NAME_PROP]);
     }
     doesDestinationMatch(destination) {
-        return destination === this.name;
+        return destination === this[PORTAL_TARGET_NAME_PROP];
     }
     allowOnlyOnePortalTargetWithName() {
-        if (HPortalTarget_1.portalTargetsNames.has(this.name)) {
+        if (HPortalTarget_1.portalTargetsNames.has(this[PORTAL_TARGET_NAME_PROP])) {
             this.remove();
-            throw new PortalTargetError(`Portal target with name "${this.name}" already exists.`);
+            throw new PortalTargetError(`Portal target with name "${this[PORTAL_TARGET_NAME_PROP]}" already exists.`);
         }
-        HPortalTarget_1.portalTargetsNames.add(this.name);
+        HPortalTarget_1.portalTargetsNames.add(this[PORTAL_TARGET_NAME_PROP]);
     }
 };
 HPortalTarget.portalTargetsNames = new Set();

package/build/esm/packages/phoenix/src/core/phoenix_light_lit_element.d.ts

@@ -1,4 +1,9 @@
-import { LitElement } from 'lit';
+import { LitElement, TemplateResult, nothing } from 'lit';
 export declare class PhoenixLightLitElement extends LitElement {
+    _slots: Record<string, TemplateResult[]>;
+    constructor();
+    connectedCallback(): void;
+    private _assignSlots;
+    getSlot(name: string): TemplateResult[] | typeof nothing;
     createRenderRoot(): PhoenixLightLitElement;
 }

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

@@ -1,10 +1,43 @@
-import { LitElement } from 'lit';
+import { __decorate, __metadata } from '../../../../external/tslib/tslib.es6.js';
+import { LitElement, html, nothing } from 'lit';
+import { DEFAULT_SLOT_NAME } from './phoenix_light_lit_elements_constants.js';
+import { state } from 'lit/decorators';
 
 class PhoenixLightLitElement extends 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 || DEFAULT_SLOT_NAME;
+            acc[slotName] = acc[slotName] || [];
+            acc[slotName].push(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 nothing;
+    }
     createRenderRoot() {
         return this;
     }
-}
+}
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], PhoenixLightLitElement.prototype, "_slots", void 0);
 
 export { PhoenixLightLitElement };
 //# sourceMappingURL=phoenix_light_lit_element.js.map

package/build/esm/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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,yCAA6C;AACpF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/core/phoenix_light_lit_elements_constants.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_SLOT_NAME = "default";

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

@@ -0,0 +1,4 @@
+const DEFAULT_SLOT_NAME = 'default';
+
+export { DEFAULT_SLOT_NAME };
+//# sourceMappingURL=phoenix_light_lit_elements_constants.js.map

package/build/esm/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;"}

package/build/esm/packages/phoenix/src/index.d.ts

@@ -4,3 +4,9 @@ export { PhoenixLightLitElement } from "./core/phoenix_light_lit_element";
 export { HelloButton } from './hello_button';
 export { HPortal } from './components/portal/portal';
 export { HPortalTarget } from './components/portal/portal_target';
+export { HModal } from './components/modal/modal';
+export { HModalBackdrop } from './components/modal/modal_backdrop';
+export { HModalBody } from './components/modal/modal_body';
+export { HModalFooter } from './components/modal/modal_footer';
+export { HModalHeader } from './components/modal/modal_header';
+export { HModalClose } from './components/modal/modal_close';

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

@@ -2,6 +2,12 @@ export { ContextProviderController } from './core/context/context_provider_contr
 export { ContextConsumerController } from './core/context/context_consumer_controller.js';
 export { PhoenixLightLitElement } from './core/phoenix_light_lit_element.js';
 export { HelloButton } from './hello_button.js';
-export { HPortal } from './components/portal/portal.js';
 export { HPortalTarget } from './components/portal/portal_target.js';
+export { HPortal } from './components/portal/portal.js';
+export { HModal } from './components/modal/modal.js';
+export { HModalBackdrop } from './components/modal/modal_backdrop.js';
+export { HModalBody } from './components/modal/modal_body.js';
+export { HModalFooter } from './components/modal/modal_footer.js';
+export { HModalHeader } from './components/modal/modal_header.js';
+export { HModalClose } from './components/modal/modal_close.js';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;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;"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@shoper/phoenix_design_system",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "0.2.1",
+  "version": "0.2.2-2",
   "description": "phoenix design system",
   "author": "zefirek",
   "license": "MIT",