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

package/dist/cjs/xpl-dropdown-option.cjs.entry.js

@@ -0,0 +1,74 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-0fdb260e.js');
+
+const XplDropdownOption = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.isDisabled = undefined;
+    this.label = undefined;
+    this.value = undefined;
+    this.isSelected = undefined;
+  }
+  componentWillLoad() {
+    this.dropdown = this.hostElement.closest('xpl-dropdown');
+  }
+  handleClick(ev) {
+    const { closeOnSelect, mode } = this.dropdown;
+    if (Boolean(ev.x && ev.y)) {
+      this.dropdown.handleSelect(ev, { component: this });
+      if (mode === 'single' && closeOnSelect)
+        this.dropdown.isOpen = false;
+    }
+  }
+  handleKeyup(ev) {
+    const { dropdown } = this;
+    const navigationKeys = [
+      'ArrowDown',
+      'ArrowLeft',
+      'ArrowRight',
+      'ArrowUp',
+      'Tab',
+    ];
+    const { closeOnSelect, mode, selectOnFocus } = this.dropdown;
+    if (selectOnFocus && navigationKeys.includes(ev.key)) {
+      const hostElement = document.activeElement.closest('xpl-dropdown-option');
+      const component = {
+        component: { hostElement },
+      };
+      dropdown.handleSelect(ev, component);
+      if (mode === 'single' && closeOnSelect)
+        this.dropdown.isOpen = false;
+      return;
+    }
+    const selectionKeys = ['Escape', 'Enter'];
+    if (selectionKeys.includes(ev.key)) {
+      dropdown.handleSelect(ev, { component: this });
+      if (this.dropdown.closeOnSelect)
+        this.dropdown.isOpen = false;
+    }
+  }
+  connectedCallback() {
+    this.hostElement.addEventListener('click', this.handleClick.bind(this));
+    this.hostElement.addEventListener('keyup', this.handleKeyup.bind(this));
+  }
+  disconnectedCallback() {
+    this.hostElement.removeEventListener('click', this.handleClick);
+    this.hostElement.removeEventListener('keyup', this.handleKeyup);
+  }
+  render() {
+    const { label, isSelected, isDisabled, value } = this;
+    return (index.h(index.Host, { class: {
+        'xpl-dropdown-option': true,
+        'xpl-dropdown-option--disabled': isDisabled,
+        'xpl-dropdown-option--selected': isSelected,
+      }, role: "option", "aria-checked": isSelected, "aria-disabled": isDisabled, "aria-selected": isSelected, value: value }, index.h("li", { class: "xpl-dropdown-list-item" }, label || index.h("slot", { name: "option" }))));
+  }
+  get hostElement() { return index.getElement(this); }
+};
+
+exports.xpl_dropdown_option = XplDropdownOption;
+
+//# sourceMappingURL=xpl-dropdown-option.cjs.entry.js.map

package/dist/cjs/xpl-dropdown-option.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"xpl-dropdown-option.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["./src/components/components/xpl-dropdown/xpl-dropdown-option/xpl-dropdown-option.tsx"],"sourcesContent":["import { Component, Element, Host, h, Prop } from '@stencil/core';\n\n@Component({ tag: 'xpl-dropdown-option' })\nexport class XplDropdownOption {\n    /** whether option is disabled */\n    @Prop({ attribute: 'disabled', reflect: true }) isDisabled?: boolean;\n\n    /**\n     * text to display for option\n     */\n    @Prop() label: string;\n\n    /**\n     * The selected options value to be submitted with the form, should this option be selected.\n     */\n    @Prop() value?: string;\n\n    /** whether option is selected */\n    @Prop({ attribute: 'selected' })\n    isSelected?: boolean;\n\n    @Element() hostElement: HTMLXplDropdownOptionElement;\n    private dropdown: HTMLXplDropdownElement;\n\n    componentWillLoad() {\n        this.dropdown = this.hostElement.closest('xpl-dropdown');\n    }\n\n    private handleClick(ev: PointerEvent) {\n        const { closeOnSelect, mode } = this.dropdown;\n\n        if (Boolean(ev.x && ev.y)) {\n            this.dropdown.handleSelect(ev, { component: this });\n\n            if (mode === 'single' && closeOnSelect)\n                this.dropdown.isOpen = false;\n        }\n    }\n\n    private handleKeyup(ev: KeyboardEvent) {\n        const { dropdown } = this;\n\n        const navigationKeys = [\n            'ArrowDown',\n            'ArrowLeft',\n            'ArrowRight',\n            'ArrowUp',\n            'Tab',\n        ];\n        const { closeOnSelect, mode, selectOnFocus } = this.dropdown;\n\n        if (selectOnFocus && navigationKeys.includes(ev.key)) {\n            const hostElement = document.activeElement.closest(\n                'xpl-dropdown-option'\n            );\n            const component = {\n                component: { hostElement } as XplDropdownOption,\n            };\n            dropdown.handleSelect(ev, component);\n\n            if (mode === 'single' && closeOnSelect)\n                this.dropdown.isOpen = false;\n            return;\n        }\n\n        const selectionKeys = ['Escape', 'Enter'];\n        if (selectionKeys.includes(ev.key)) {\n            dropdown.handleSelect(ev, { component: this });\n\n            if (this.dropdown.closeOnSelect) this.dropdown.isOpen = false;\n        }\n    }\n\n    connectedCallback() {\n        this.hostElement.addEventListener('click', this.handleClick.bind(this));\n        this.hostElement.addEventListener('keyup', this.handleKeyup.bind(this));\n    }\n\n    disconnectedCallback() {\n        this.hostElement.removeEventListener('click', this.handleClick);\n        this.hostElement.removeEventListener('keyup', this.handleKeyup);\n    }\n\n    render() {\n        const { label, isSelected, isDisabled, value } = this;\n\n        return (\n            <Host\n                class={{\n                    'xpl-dropdown-option': true,\n                    'xpl-dropdown-option--disabled': isDisabled,\n                    'xpl-dropdown-option--selected': isSelected,\n                }}\n                role=\"option\"\n                aria-checked={isSelected}\n                aria-disabled={isDisabled}\n                aria-selected={isSelected}\n                value={value}\n            >\n                <li class=\"xpl-dropdown-list-item\">\n                    {label || <slot name=\"option\"></slot>}\n                </li>\n            </Host>\n        );\n    }\n}\n"],"version":3}

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

@@ -0,0 +1,110 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-0fdb260e.js');
+
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s)
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+const XplDropdown = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.handleClickOutside = ({ target }) => {
+      const { triggerId } = this;
+      const isTrigger = triggerId && target.id === triggerId;
+      const isInside = this.hostElement.contains(target);
+      if (!isInside && !isTrigger)
+        this.isOpen = false;
+    };
+    this.isOpen = false;
+    this.closeOnSelect = true;
+    this.mode = 'single';
+    this.options = undefined;
+    this.selectOnFocus = false;
+    this.triggerId = undefined;
+    this.update = undefined;
+  }
+  /**
+   * called on dropdown option click and keydown events to update isSelected states
+   */
+  async handleSelect(e, { component }) {
+    const { hostElement, mode, options, update } = this;
+    const isSingle = mode === 'single';
+    const isMulti = mode === 'multi';
+    if (Boolean(options)) {
+      options
+        .reduce((acc, curr) => [
+        ...acc,
+        ...(curr.groupName ? curr.options : [curr]),
+      ], [])
+        .forEach((option) => {
+        const isMatch = (option.value || option.label) ===
+          (component.hostElement.value ||
+            component.hostElement.label);
+        if (isSingle) {
+          option.isSelected = isMatch;
+          component.hostElement.isSelected = option.isSelected;
+        }
+        else if (isMulti && isMatch) {
+          option.isSelected = !option.isSelected;
+          component.hostElement.isSelected = option.isSelected;
+        }
+      });
+      const mapOptions = (option) => {
+        option.options = option.groupName
+          ? option.options.map(mapOptions)
+          : undefined;
+        return option;
+      };
+      this.options = options.map(mapOptions);
+    }
+    else if (isSingle) {
+      const optionNodes = Array.from(hostElement.querySelectorAll('xpl-dropdown-option'));
+      optionNodes.forEach((node) => (node.isSelected = node === component.hostElement));
+    }
+    else if (isMulti) {
+      component.isSelected = !component.isSelected;
+    }
+    if (Boolean(update))
+      update(e, { component: this });
+  }
+  componentWillLoad() {
+    this.handleSelect = this.handleSelect.bind(this);
+  }
+  connectedCallback() {
+    document.addEventListener('mousedown', this.handleClickOutside.bind(this));
+  }
+  disconnectedCallback() {
+    document.removeEventListener('mousedown', this.handleClickOutside);
+  }
+  render() {
+    let { isOpen } = this;
+    const { mode, options } = this;
+    const hasOptions = options && options.length;
+    const mappedOptions = hasOptions &&
+      options.map((_a) => {
+        var { groupName, options } = _a, properties = __rest(_a, ["groupName", "options"]);
+        return groupName ? (index.h("xpl-dropdown-group", Object.assign({ groupName: groupName, options: options }, properties))) : (index.h("xpl-dropdown-option", Object.assign({}, properties)));
+      });
+    return (index.h(index.Host, { "aria-expanded": isOpen, class: {
+        'xpl-dropdown': true,
+        'xpl-dropdown--multi': mode === 'multi',
+        'xpl-dropdown--open': isOpen,
+      }, role: "listbox" }, index.h("ul", { class: "xpl-dropdown-list" }, mappedOptions || index.h("slot", { name: "options" }))));
+  }
+  get hostElement() { return index.getElement(this); }
+};
+
+exports.xpl_dropdown = XplDropdown;
+
+//# sourceMappingURL=xpl-dropdown.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"xpl-dropdown.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["./src/components/components/xpl-dropdown/xpl-dropdown.tsx"],"sourcesContent":["import { Component, Element, h, Host, Method, Prop } from '@stencil/core';\nimport type { DropdownItem } from './dropdownoption';\nimport type { XplDropdownOption } from './xpl-dropdown-option/xpl-dropdown-option';\n\n@Component({ tag: 'xpl-dropdown' })\nexport class XplDropdown {\n    /** text to display as heading */\n    @Prop({ attribute: 'open', mutable: true, reflect: true }) isOpen: boolean =\n        false;\n\n    /** options that are listed */\n    @Prop() closeOnSelect: boolean = true;\n\n    /** constant representing number of options that can be selected */\n    @Prop() mode: 'single' | 'multi' = 'single';\n\n    /** options that are listed */\n    @Prop() options?: DropdownItem[];\n\n    /** whether selection should be made when focusing on interactable element */\n    @Prop() selectOnFocus: boolean = false;\n\n    /** the id for the element that triggers the open state */\n    @Prop() triggerId: string;\n\n    /**\n     * @callback update\n     * @param {Object} e - event object\n     * @param {Object} options - component\n     */\n    /** call back function invoked when a selection is made */\n    @Prop() update?: (e, { component }: { component: XplDropdown }) => void;\n\n    @Element() hostElement: HTMLXplDropdownElement;\n\n    /**\n     * called on dropdown option click and keydown events to update isSelected states\n     */\n    @Method()\n    async handleSelect(\n        e,\n        { component }: { component: XplDropdownOption }\n    ): Promise<void> {\n        const { hostElement, mode, options, update } = this;\n        const isSingle = mode === 'single';\n        const isMulti = mode === 'multi';\n\n        if (Boolean(options)) {\n            options\n                .reduce<typeof options>(\n                    (acc, curr) => [\n                        ...acc,\n                        ...(curr.groupName ? curr.options : [curr]),\n                    ],\n                    []\n                )\n                .forEach((option) => {\n                    const isMatch =\n                        (option.value || option.label) ===\n                        (component.hostElement.value ||\n                            component.hostElement.label);\n                    if (isSingle) {\n                        option.isSelected = isMatch;\n                        component.hostElement.isSelected = option.isSelected;\n                    } else if (isMulti && isMatch) {\n                        option.isSelected = !option.isSelected;\n                        component.hostElement.isSelected = option.isSelected;\n                    }\n                });\n\n            const mapOptions = (option: DropdownItem): DropdownItem => {\n                option.options = option.groupName\n                    ? option.options.map(mapOptions)\n                    : undefined;\n                return option;\n            };\n            this.options = options.map(mapOptions);\n        } else if (isSingle) {\n            const optionNodes = Array.from(\n                hostElement.querySelectorAll('xpl-dropdown-option')\n            );\n            optionNodes.forEach(\n                (node) => (node.isSelected = node === component.hostElement)\n            );\n        } else if (isMulti) {\n            component.isSelected = !component.isSelected;\n        }\n\n        if (Boolean(update)) update(e, { component: this });\n    }\n\n    private handleClickOutside = ({ target }: MouseEvent): void => {\n        const { triggerId } = this;\n        const isTrigger = triggerId && (target as HTMLElement).id === triggerId;\n        const isInside = this.hostElement.contains(\n            target as undefined as HTMLElement\n        );\n\n        if (!isInside && !isTrigger) this.isOpen = false;\n    };\n\n    componentWillLoad() {\n        this.handleSelect = this.handleSelect.bind(this);\n    }\n\n    connectedCallback() {\n        document.addEventListener(\n            'mousedown',\n            this.handleClickOutside.bind(this)\n        );\n    }\n\n    disconnectedCallback() {\n        document.removeEventListener('mousedown', this.handleClickOutside);\n    }\n\n    render() {\n        let { isOpen } = this;\n\n        const { mode, options } = this;\n\n        const hasOptions = options && options.length;\n        const mappedOptions =\n            hasOptions &&\n            options.map(({ groupName, options, ...properties }) =>\n                groupName ? (\n                    <xpl-dropdown-group\n                        groupName={groupName}\n                        options={options}\n                        {...properties}\n                    ></xpl-dropdown-group>\n                ) : (\n                    <xpl-dropdown-option {...properties}></xpl-dropdown-option>\n                )\n            );\n\n        return (\n            <Host\n                aria-expanded={isOpen}\n                class={{\n                    'xpl-dropdown': true,\n                    'xpl-dropdown--multi': mode === 'multi',\n                    'xpl-dropdown--open': isOpen,\n                }}\n                role=\"listbox\"\n            >\n                <ul class=\"xpl-dropdown-list\">\n                    {mappedOptions || <slot name=\"options\"></slot>}\n                </ul>\n            </Host>\n        );\n    }\n}\n"],"version":3}

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2ab4832e.js');
+const index = require('./index-e53b018b.js');
 
 var __rest = (undefined && undefined.__rest) || function (s, e) {
   var t = {};
@@ -48,7 +48,9 @@ const XplDropdown = class {
         ...(curr.groupName ? curr.options : [curr]),
       ], [])
         .forEach((option) => {
-        const isMatch = option.label === component.hostElement.label;
+        const isMatch = (option.value || option.label) ===
+          (component.hostElement.value ||
+            component.hostElement.label);
         if (isSingle) {
           option.isSelected = isMatch;
           component.hostElement.isSelected = option.isSelected;
@@ -119,3 +121,5 @@ const XplTag = class {
 
 exports.xpl_dropdown = XplDropdown;
 exports.xpl_tag = XplTag;
+
+//# sourceMappingURL=xpl-dropdown_2.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"xpl-dropdown.xpl-tag.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["./src/components/components/xpl-dropdown/xpl-dropdown.tsx","./src/components/components/xpl-tag/xpl-tag.tsx"],"sourcesContent":["import { Component, Element, h, Host, Method, Prop } from '@stencil/core';\nimport type { DropdownItem } from './dropdownoption';\nimport type { XplDropdownOption } from './xpl-dropdown-option/xpl-dropdown-option';\n\n@Component({ tag: 'xpl-dropdown' })\nexport class XplDropdown {\n    /** text to display as heading */\n    @Prop({ attribute: 'open', mutable: true, reflect: true }) isOpen: boolean =\n        false;\n\n    /** options that are listed */\n    @Prop() closeOnSelect: boolean = true;\n\n    /** constant representing number of options that can be selected */\n    @Prop() mode: 'single' | 'multi' = 'single';\n\n    /** options that are listed */\n    @Prop() options?: DropdownItem[];\n\n    /** whether selection should be made when focusing on interactable element */\n    @Prop() selectOnFocus: boolean = false;\n\n    /** the id for the element that triggers the open state */\n    @Prop() triggerId: string;\n\n    /**\n     * @callback update\n     * @param {Object} e - event object\n     * @param {Object} options - component\n     */\n    /** call back function invoked when a selection is made */\n    @Prop() update?: (e, { component }: { component: XplDropdown }) => void;\n\n    @Element() hostElement: HTMLXplDropdownElement;\n\n    /**\n     * called on dropdown option click and keydown events to update isSelected states\n     */\n    @Method()\n    async handleSelect(\n        e,\n        { component }: { component: XplDropdownOption }\n    ): Promise<void> {\n        const { hostElement, mode, options, update } = this;\n        const isSingle = mode === 'single';\n        const isMulti = mode === 'multi';\n\n        if (Boolean(options)) {\n            options\n                .reduce<typeof options>(\n                    (acc, curr) => [\n                        ...acc,\n                        ...(curr.groupName ? curr.options : [curr]),\n                    ],\n                    []\n                )\n                .forEach((option) => {\n                    const isMatch =\n                        (option.value || option.label) ===\n                        (component.hostElement.value ||\n                            component.hostElement.label);\n                    if (isSingle) {\n                        option.isSelected = isMatch;\n                        component.hostElement.isSelected = option.isSelected;\n                    } else if (isMulti && isMatch) {\n                        option.isSelected = !option.isSelected;\n                        component.hostElement.isSelected = option.isSelected;\n                    }\n                });\n\n            const mapOptions = (option: DropdownItem): DropdownItem => {\n                option.options = option.groupName\n                    ? option.options.map(mapOptions)\n                    : undefined;\n                return option;\n            };\n            this.options = options.map(mapOptions);\n        } else if (isSingle) {\n            const optionNodes = Array.from(\n                hostElement.querySelectorAll('xpl-dropdown-option')\n            );\n            optionNodes.forEach(\n                (node) => (node.isSelected = node === component.hostElement)\n            );\n        } else if (isMulti) {\n            component.isSelected = !component.isSelected;\n        }\n\n        if (Boolean(update)) update(e, { component: this });\n    }\n\n    private handleClickOutside = ({ target }: MouseEvent): void => {\n        const { triggerId } = this;\n        const isTrigger = triggerId && (target as HTMLElement).id === triggerId;\n        const isInside = this.hostElement.contains(\n            target as undefined as HTMLElement\n        );\n\n        if (!isInside && !isTrigger) this.isOpen = false;\n    };\n\n    componentWillLoad() {\n        this.handleSelect = this.handleSelect.bind(this);\n    }\n\n    connectedCallback() {\n        document.addEventListener(\n            'mousedown',\n            this.handleClickOutside.bind(this)\n        );\n    }\n\n    disconnectedCallback() {\n        document.removeEventListener('mousedown', this.handleClickOutside);\n    }\n\n    render() {\n        let { isOpen } = this;\n\n        const { mode, options } = this;\n\n        const hasOptions = options && options.length;\n        const mappedOptions =\n            hasOptions &&\n            options.map(({ groupName, options, ...properties }) =>\n                groupName ? (\n                    <xpl-dropdown-group\n                        groupName={groupName}\n                        options={options}\n                        {...properties}\n                    ></xpl-dropdown-group>\n                ) : (\n                    <xpl-dropdown-option {...properties}></xpl-dropdown-option>\n                )\n            );\n\n        return (\n            <Host\n                aria-expanded={isOpen}\n                class={{\n                    'xpl-dropdown': true,\n                    'xpl-dropdown--multi': mode === 'multi',\n                    'xpl-dropdown--open': isOpen,\n                }}\n                role=\"listbox\"\n            >\n                <ul class=\"xpl-dropdown-list\">\n                    {mappedOptions || <slot name=\"options\"></slot>}\n                </ul>\n            </Host>\n        );\n    }\n}\n","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-grid-item.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2ab4832e.js');
+const index = require('./index-0fdb260e.js');
 
 const XplGridItem = class {
   constructor(hostRef) {
@@ -23,3 +23,5 @@ const XplGridItem = class {
 };
 
 exports.xpl_grid_item = XplGridItem;
+
+//# sourceMappingURL=xpl-grid-item.cjs.entry.js.map

package/dist/cjs/xpl-grid-item.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"xpl-grid-item.entry.cjs.js","mappings":";;;;;;MAKa,WAAW;;;cACC,CAAC;cACD,CAAC;cACD,CAAC;cACD,CAAC;;EAEtB,MAAM;IACF,IAAI,SAAS,GAAG,eAAe,CAAC;IAChC,SAAS,IAAI,qBAAqB,IAAI,CAAC,EAAE,EAAE,CAAC;IAC5C,SAAS,IAAI,qBAAqB,IAAI,CAAC,EAAE,EAAE,CAAC;IAC5C,SAAS,IAAI,qBAAqB,IAAI,CAAC,EAAE,EAAE,CAAC;IAC5C,SAAS,IAAI,qBAAqB,IAAI,CAAC,EAAE,EAAE,CAAC;IAE5C,QACIA,QAACC,UAAI,IAAC,KAAK,EAAE,SAAS,IAClBD,qBAAa,CACV,EACT;GACL;;;;;","names":["h","Host"],"sources":["./src/components/components/xpl-grid-item/xpl-grid-item.tsx"],"sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'xpl-grid-item',\n})\nexport class XplGridItem {\n    @Prop() xs: number = 6;\n    @Prop() sm: number = 6;\n    @Prop() md: number = 6;\n    @Prop() lg: number = 6;\n\n    render() {\n        let className = 'xpl-grid-item';\n        className += ` xpl-grid-item-xs-${this.xs}`;\n        className += ` xpl-grid-item-sm-${this.sm}`;\n        className += ` xpl-grid-item-md-${this.md}`;\n        className += ` xpl-grid-item-lg-${this.lg}`;\n\n        return (\n            <Host class={className}>\n                <slot></slot>\n            </Host>\n        );\n    }\n}\n"],"version":3}

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2ab4832e.js');
+const index = require('./index-0fdb260e.js');
 
 const XplGrid = class {
   constructor(hostRef) {
@@ -33,3 +33,5 @@ const XplGrid = class {
 };
 
 exports.xpl_grid = XplGrid;
+
+//# sourceMappingURL=xpl-grid.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"xpl-grid.entry.cjs.js","mappings":";;;;;;MAKa,OAAO;;;;EAGhB,gBAAgB;IACZ,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CACpB,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CACpD,CAAC;IAEF,IAAI,SAAS,GAAG,CAAC,EACb,SAAS,GAAG,CAAC,EACb,SAAS,GAAG,CAAC,EACb,SAAS,GAAG,CAAC,CAAC;IAElB,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI;MACf,SAAS,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;MAC3C,SAAS,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;MAC3C,SAAS,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;MAC3C,SAAS,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;MAE3C,IAAI,SAAS,GAAG,CAAC,KAAK,CAAC;QACnB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,uBAAuB,CAAC,CAAC;MAChD,IAAI,SAAS,GAAG,CAAC,KAAK,CAAC;QACnB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,uBAAuB,CAAC,CAAC;MAChD,IAAI,SAAS,GAAG,CAAC,KAAK,CAAC;QACnB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,uBAAuB,CAAC,CAAC;MAChD,IAAI,SAAS,GAAG,CAAC,KAAK,CAAC;QACnB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,uBAAuB,CAAC,CAAC;KACnD,CAAC,CAAC;GACN;EAED,MAAM;IACF,OAAOA,QAACC,UAAI,IAAC,KAAK,EAAC,UAAU,GAAG,CAAC;GACpC;;;;;;","names":["h","Host"],"sources":["./src/components/components/xpl-grid/xpl-grid.tsx"],"sourcesContent":["import { Component, Host, h, Element } from '@stencil/core';\n\n@Component({\n    tag: 'xpl-grid',\n})\nexport class XplGrid {\n    @Element() container: HTMLXplGridElement;\n\n    componentDidLoad() {\n        const items = Array.from(\n            this.container.querySelectorAll('.xpl-grid-item')\n        );\n\n        let lgCounter = 0,\n            mdCounter = 0,\n            smCounter = 0,\n            xsCounter = 0;\n\n        items.forEach((item) => {\n            lgCounter += +item.getAttribute('lg') || 6;\n            mdCounter += +item.getAttribute('md') || 6;\n            smCounter += +item.getAttribute('sm') || 6;\n            xsCounter += +item.getAttribute('xs') || 6;\n\n            if (lgCounter % 6 === 0)\n                item.classList.add('xpl-grid-item-lg-last');\n            if (mdCounter % 6 === 0)\n                item.classList.add('xpl-grid-item-md-last');\n            if (smCounter % 6 === 0)\n                item.classList.add('xpl-grid-item-sm-last');\n            if (xsCounter % 6 === 0)\n                item.classList.add('xpl-grid-item-xs-last');\n        });\n    }\n\n    render() {\n        return <Host class=\"xpl-grid\" />;\n    }\n}\n"],"version":3}