@sparkle-learning/core 0.0.33 → 0.0.36

package/dist/esm/ion-segment.entry.js

@@ -1,8 +1,8 @@
-import { r as registerInstance, i as createEvent, w as writeTask, h, H as Host, e as getElement } from './index-5568e3fa.js';
-import { c as config, g as getIonMode } from './ionic-global-0939c477.js';
-import { p as pointerCoord } from './helpers-9d0930de.js';
+import { r as registerInstance, i as createEvent, w as writeTask, h, H as Host, e as getElement } from './index-c04b9ed5.js';
+import { c as config, g as getIonMode } from './ionic-global-4903e23e.js';
+import { q as pointerCoord } from './helpers-bf0e23d6.js';
 import { i as isRTL } from './dir-03012648.js';
-import { c as createColorClasses, h as hostContext } from './theme-c336c9d9.js';
+import { c as createColorClasses, h as hostContext } from './theme-7ef00c83.js';
 
 const segmentIosCss = ":host{--ripple-color:currentColor;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;position:relative;align-items:stretch;justify-content:center;width:100%;background:var(--background);font-family:var(--ion-font-family, inherit);text-align:center;contain:paint;user-select:none}:host(.segment-scrollable){justify-content:start;width:auto;overflow-x:auto}:host(.segment-scrollable::-webkit-scrollbar){display:none}:host{--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.065);border-radius:8px;overflow:hidden;z-index:0}:host(.ion-color){background:rgba(var(--ion-color-base-rgb), 0.065)}:host(.in-toolbar){margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;width:auto}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.in-toolbar){margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto}}:host(.in-toolbar:not(.ion-color)){background:var(--ion-toolbar-segment-background, var(--background))}:host(.in-toolbar-color:not(.ion-color)){background:rgba(var(--ion-color-contrast-rgb), 0.11)}";
 
@@ -57,8 +57,8 @@ const Segment = class {
       this.checked = current;
     };
     this.getSegmentButton = (selector) => {
-      const buttons = this.getButtons().filter(button => !button.disabled);
-      const currIndex = buttons.findIndex(button => button === document.activeElement);
+      const buttons = this.getButtons().filter((button) => !button.disabled);
+      const currIndex = buttons.findIndex((button) => button === document.activeElement);
       switch (selector) {
         case 'first':
           return buttons[0];
@@ -80,8 +80,7 @@ const Segment = class {
      * we need to emit style so the segment-buttons
      * can apply their color classes properly.
      */
-    if ((oldValue === undefined && value !== undefined) ||
-      (oldValue !== undefined && value === undefined)) {
+    if ((oldValue === undefined && value !== undefined) || (oldValue !== undefined && value === undefined)) {
       this.emitStyle();
     }
   }
@@ -120,15 +119,15 @@ const Segment = class {
   async componentDidLoad() {
     this.setCheckedClasses();
     this.ensureFocusable();
-    this.gesture = (await import('./index-a12c14bd.js')).createGesture({
+    this.gesture = (await import('./index-21661af2.js')).createGesture({
       el: this.el,
       gestureName: 'segment',
       gesturePriority: 100,
       threshold: 0,
       passive: false,
-      onStart: ev => this.onStart(ev),
-      onMove: ev => this.onMove(ev),
-      onEnd: ev => this.onEnd(ev),
+      onStart: (ev) => this.onStart(ev),
+      onMove: (ev) => this.onMove(ev),
+      onEnd: (ev) => this.onEnd(ev),
     });
     this.gestureChanged();
     if (this.disabled) {
@@ -169,14 +168,14 @@ const Segment = class {
       return;
     }
     const buttons = this.getButtons();
-    const checked = buttons.find(button => button.value === this.value);
+    const checked = buttons.find((button) => button.value === this.value);
     const root = checked.shadowRoot || checked;
     const ripple = root.querySelector('ion-ripple-effect');
     if (!ripple) {
       return;
     }
     const { x, y } = pointerCoord(detail.event);
-    ripple.addRipple(x, y).then(remove => remove());
+    ripple.addRipple(x, y).then((remove) => remove());
   }
   /*
    * Activate both the segment and the buttons
@@ -184,7 +183,7 @@ const Segment = class {
    */
   setActivated(activated) {
     const buttons = this.getButtons();
-    buttons.forEach(button => {
+    buttons.forEach((button) => {
       if (activated) {
         button.classList.add('segment-button-activated');
       }
@@ -197,7 +196,7 @@ const Segment = class {
   activate(detail) {
     const clicked = detail.event.target;
     const buttons = this.getButtons();
-    const checked = buttons.find(button => button.value === this.value);
+    const checked = buttons.find((button) => button.value === this.value);
     // Make sure we are only checking for activation on a segment button
     // since disabled buttons will get the click on the segment
     if (clicked.tagName !== 'ION-SEGMENT-BUTTON') {
@@ -247,10 +246,10 @@ const Segment = class {
   }
   setCheckedClasses() {
     const buttons = this.getButtons();
-    const index = buttons.findIndex(button => button.value === this.value);
+    const index = buttons.findIndex((button) => button.value === this.value);
     const next = index + 1;
     // Keep track of the currently checked button
-    this.checked = buttons.find(button => button.value === this.value);
+    this.checked = buttons.find((button) => button.value === this.value);
     for (const button of buttons) {
       button.classList.remove('segment-button-after-checked');
     }
@@ -262,7 +261,7 @@ const Segment = class {
     const rtl = isRTL(this.el);
     const activated = this.activated;
     const buttons = this.getButtons();
-    const index = buttons.findIndex(button => button.value === this.value);
+    const index = buttons.findIndex((button) => button.value === this.value);
     const previous = buttons[index];
     let current;
     let nextIndex;
@@ -278,7 +277,7 @@ const Segment = class {
     // gesture event and the Y coordinate of the starting element, since the gesture
     // can move up and down off of the segment
     const currentX = detail.currentX;
-    const previousY = rect.top + (rect.height / 2);
+    const previousY = rect.top + rect.height / 2;
     /**
      * Segment can be used inside the shadow dom
      * so doing document.elementFromPoint would never
@@ -289,8 +288,8 @@ const Segment = class {
      */
     const root = this.el.getRootNode();
     const nextEl = root.elementFromPoint(currentX, previousY);
-    const decreaseIndex = rtl ? currentX > (left + width) : currentX < left;
-    const increaseIndex = rtl ? currentX < left : currentX > (left + width);
+    const decreaseIndex = rtl ? currentX > left + width : currentX < left;
+    const increaseIndex = rtl ? currentX < left : currentX > left + width;
     // If the indicator is currently activated then we have started the gesture
     // on top of the checked button so we need to slide the indicator
     // by checking the button next to it as we move
@@ -320,7 +319,6 @@ const Segment = class {
     if (!activated && isEnd) {
       current = nextEl;
     }
-    /* tslint:disable-next-line */
     if (current != null) {
       /**
        * If current element is ion-segment then that means
@@ -338,7 +336,7 @@ const Segment = class {
   }
   emitStyle() {
     this.ionStyle.emit({
-      'segment': true
+      segment: true,
     });
   }
   onKeyDown(ev) {
@@ -379,7 +377,7 @@ const Segment = class {
   }
   /* By default, focus is delegated to the selected `ion-segment-button`.
    * If there is no selected button, focus will instead pass to the first child button.
-  **/
+   **/
   ensureFocusable() {
     var _a;
     if (this.value !== undefined) {
@@ -396,7 +394,7 @@ const Segment = class {
         'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
         'segment-activated': this.activated,
         'segment-disabled': this.disabled,
-        'segment-scrollable': this.scrollable
+        'segment-scrollable': this.scrollable,
       }) }, h("slot", null)));
   }
   get el() { return getElement(this); }

package/dist/esm/ion-select_2.entry.js

@@ -1,31 +1,30 @@
-import { r as registerInstance, i as createEvent, h, H as Host, e as getElement } from './index-5568e3fa.js';
-import { g as getIonMode } from './ionic-global-0939c477.js';
-import { f as focusElement, m as findItemLabel, n as getAriaLabel, d as renderHiddenInput } from './helpers-9d0930de.js';
-import { c as popoverController, f as actionSheetController, h as alertController } from './overlays-5c777f10.js';
-import { h as hostContext } from './theme-c336c9d9.js';
-import './hardware-back-button-b6ccf74a.js';
+import { r as registerInstance, i as createEvent, h, H as Host, e as getElement } from './index-c04b9ed5.js';
+import { g as getIonMode } from './ionic-global-4903e23e.js';
+import { f as focusElement, k as findItemLabel, b as getAriaLabel, d as renderHiddenInput } from './helpers-bf0e23d6.js';
+import { f as popoverController, h as actionSheetController, a as alertController } from './overlays-3b4dca92.js';
+import { h as hostContext } from './theme-7ef00c83.js';
+import './hardware-back-button-fa04d6e9.js';
 
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
 const watchForOptions = (containerEl, tagName, onChange) => {
-  /* tslint:disable-next-line */
   if (typeof MutationObserver === 'undefined') {
     return;
   }
-  const mutation = new MutationObserver(mutationList => {
+  const mutation = new MutationObserver((mutationList) => {
     onChange(getSelectedOption(mutationList, tagName));
   });
   mutation.observe(containerEl, {
     childList: true,
-    subtree: true
+    subtree: true,
   });
   return mutation;
 };
 const getSelectedOption = (mutationList, tagName) => {
   let newOption;
-  mutationList.forEach(mut => {
-    // tslint:disable-next-line: prefer-for-of
+  mutationList.forEach((mut) => {
+    // eslint-disable-next-line @typescript-eslint/prefer-for-of
     for (let i = 0; i < mut.addedNodes.length; i++) {
       newOption = findCheckedOption(mut.addedNodes[i], tagName) || newOption;
     }
@@ -36,9 +35,7 @@ const findCheckedOption = (el, tagName) => {
   if (el.nodeType !== 1) {
     return undefined;
   }
-  const options = (el.tagName === tagName.toUpperCase())
-    ? [el]
-    : Array.from(el.querySelectorAll(tagName));
+  const options = el.tagName === tagName.toUpperCase() ? [el] : Array.from(el.querySelectorAll(tagName));
   return options.find((o) => o.value === el.value);
 };
 
@@ -51,6 +48,7 @@ const Select = class {
     registerInstance(this, hostRef);
     this.ionChange = createEvent(this, "ionChange", 7);
     this.ionCancel = createEvent(this, "ionCancel", 7);
+    this.ionDismiss = createEvent(this, "ionDismiss", 7);
     this.ionFocus = createEvent(this, "ionFocus", 7);
     this.ionBlur = createEvent(this, "ionBlur", 7);
     this.ionStyle = createEvent(this, "ionStyle", 7);
@@ -107,6 +105,7 @@ const Select = class {
   }
   valueChanged() {
     this.emitStyle();
+    // TODO: FW-1160 - Remove the `didInit` property when ionChange behavior is changed in v7.
     if (this.didInit) {
       this.ionChange.emit({
         value: this.value,
@@ -139,17 +138,18 @@ const Select = class {
     if (this.disabled || this.isExpanded) {
       return undefined;
     }
-    const overlay = this.overlay = await this.createOverlay(event);
     this.isExpanded = true;
+    const overlay = (this.overlay = await this.createOverlay(event));
     overlay.onDidDismiss().then(() => {
       this.overlay = undefined;
       this.isExpanded = false;
+      this.ionDismiss.emit();
       this.setFocus();
     });
     await overlay.present();
     // focus selected option for popovers
     if (this.interface === 'popover') {
-      let indexOfSelected = this.childOpts.map(o => o.value).indexOf(this.value);
+      let indexOfSelected = this.childOpts.map((o) => o.value).indexOf(this.value);
       indexOfSelected = indexOfSelected > -1 ? indexOfSelected : 0; // default to first option if nothing selected
       const selectedEl = overlay.querySelector(`.select-interface-option:nth-child(${indexOfSelected + 1})`);
       if (selectedEl) {
@@ -194,24 +194,26 @@ const Select = class {
         }
         break;
       case 'alert':
-        const inputType = (this.multiple ? 'checkbox' : 'radio');
+        const inputType = this.multiple ? 'checkbox' : 'radio';
         overlay.inputs = this.createAlertInputs(childOpts, inputType, value);
         break;
     }
   }
   createActionSheetButtons(data, selectValue) {
-    const actionSheetButtons = data.map(option => {
+    const actionSheetButtons = data.map((option) => {
       const value = getOptionValue(option);
       // Remove hydrated before copying over classes
-      const copyClasses = Array.from(option.classList).filter(cls => cls !== 'hydrated').join(' ');
+      const copyClasses = Array.from(option.classList)
+        .filter((cls) => cls !== 'hydrated')
+        .join(' ');
       const optClass = `${OPTION_CLASS} ${copyClasses}`;
       return {
-        role: (isOptionSelected(selectValue, value, this.compareWith) ? 'selected' : ''),
+        role: isOptionSelected(selectValue, value, this.compareWith) ? 'selected' : '',
         text: option.textContent,
         cssClass: optClass,
         handler: () => {
           this.value = value;
-        }
+        },
       };
     });
     // Add "cancel" button
@@ -220,15 +222,17 @@ const Select = class {
       role: 'cancel',
       handler: () => {
         this.ionCancel.emit();
-      }
+      },
     });
     return actionSheetButtons;
   }
   createAlertInputs(data, inputType, selectValue) {
-    const alertInputs = data.map(option => {
+    const alertInputs = data.map((option) => {
       const value = getOptionValue(option);
       // Remove hydrated before copying over classes
-      const copyClasses = Array.from(option.classList).filter(cls => cls !== 'hydrated').join(' ');
+      const copyClasses = Array.from(option.classList)
+        .filter((cls) => cls !== 'hydrated')
+        .join(' ');
       const optClass = `${OPTION_CLASS} ${copyClasses}`;
       return {
         type: inputType,
@@ -236,16 +240,18 @@ const Select = class {
         label: option.textContent || '',
         value,
         checked: isOptionSelected(selectValue, value, this.compareWith),
-        disabled: option.disabled
+        disabled: option.disabled,
       };
     });
     return alertInputs;
   }
   createPopoverOptions(data, selectValue) {
-    const popoverOptions = data.map(option => {
+    const popoverOptions = data.map((option) => {
       const value = getOptionValue(option);
       // Remove hydrated before copying over classes
-      const copyClasses = Array.from(option.classList).filter(cls => cls !== 'hydrated').join(' ');
+      const copyClasses = Array.from(option.classList)
+        .filter((cls) => cls !== 'hydrated')
+        .join(' ');
       const optClass = `${OPTION_CLASS} ${copyClasses}`;
       return {
         text: option.textContent || '',
@@ -258,7 +264,7 @@ const Select = class {
           if (!this.multiple) {
             this.close();
           }
-        }
+        },
       };
     });
     return popoverOptions;
@@ -277,7 +283,7 @@ const Select = class {
     // full width of the item when it presents
     if (item && (item.classList.contains('item-label-floating') || item.classList.contains('item-label-stacked'))) {
       event = Object.assign(Object.assign({}, ev), { detail: {
-          ionShadowTarget: item
+          ionShadowTarget: item,
         } });
       size = 'cover';
     }
@@ -289,7 +295,7 @@ const Select = class {
         message: interfaceOptions.message,
         multiple,
         value,
-        options: this.createPopoverOptions(this.childOpts, value)
+        options: this.createPopoverOptions(this.childOpts, value),
       } });
     return popoverController.create(popoverOpts);
   }
@@ -301,9 +307,9 @@ const Select = class {
   }
   async openAlert() {
     const label = this.getLabel();
-    const labelText = (label) ? label.textContent : null;
+    const labelText = label ? label.textContent : null;
     const interfaceOptions = this.interfaceOptions;
-    const inputType = (this.multiple ? 'checkbox' : 'radio');
+    const inputType = this.multiple ? 'checkbox' : 'radio';
     const mode = getIonMode(this);
     const alertOpts = Object.assign(Object.assign({ mode }, interfaceOptions), { header: interfaceOptions.header ? interfaceOptions.header : labelText, inputs: this.createAlertInputs(this.childOpts, inputType, this.value), buttons: [
         {
@@ -311,16 +317,19 @@ const Select = class {
           role: 'cancel',
           handler: () => {
             this.ionCancel.emit();
-          }
+          },
         },
         {
           text: this.okText,
           handler: (selectedValues) => {
             this.value = selectedValues;
-          }
-        }
-      ], cssClass: ['select-alert', interfaceOptions.cssClass,
-        (this.multiple ? 'multiple-select-alert' : 'single-select-alert')] });
+          },
+        },
+      ], cssClass: [
+        'select-alert',
+        interfaceOptions.cssClass,
+        this.multiple ? 'multiple-select-alert' : 'single-select-alert',
+      ] });
     return alertController.create(alertOpts);
   }
   /**
@@ -356,9 +365,9 @@ const Select = class {
   }
   emitStyle() {
     this.ionStyle.emit({
-      'interactive': true,
+      interactive: true,
       'interactive-disabled': this.disabled,
-      'select': true,
+      select: true,
       'select-disabled': this.disabled,
       'has-placeholder': this.placeholder !== undefined,
       'has-value': this.hasValue(),
@@ -379,22 +388,20 @@ const Select = class {
     }
     const selectTextClasses = {
       'select-text': true,
-      'select-placeholder': addPlaceholderClass
+      'select-placeholder': addPlaceholderClass,
     };
     const textPart = addPlaceholderClass ? 'placeholder' : 'text';
     // If there is a label then we need to concatenate it with the
     // current value (or placeholder) and a comma so it separates
     // nicely when the screen reader announces it, otherwise just
     // announce the value / placeholder
-    const displayLabel = labelText !== undefined
-      ? (selectText !== '' ? `${selectText}, ${labelText}` : labelText)
-      : selectText;
+    const displayLabel = labelText !== undefined ? (selectText !== '' ? `${selectText}, ${labelText}` : labelText) : selectText;
     return (h(Host, { onClick: this.onClick, role: "button", "aria-haspopup": "listbox", "aria-disabled": disabled ? 'true' : null, "aria-label": displayLabel, class: {
         [mode]: true,
         'in-item': hostContext('ion-item', el),
         'select-disabled': disabled,
-        'select-expanded': isExpanded
-      } }, h("div", { "aria-hidden": "true", class: selectTextClasses, part: textPart }, selectText), h("div", { class: "select-icon", role: "presentation", part: "icon" }, h("div", { class: "select-icon-inner" })), h("label", { id: labelId }, displayLabel), h("button", { type: "button", disabled: disabled, id: inputId, "aria-labelledby": labelId, "aria-haspopup": "listbox", "aria-expanded": `${isExpanded}`, onFocus: this.onFocus, onBlur: this.onBlur, ref: (focusEl => this.focusEl = focusEl) })));
+        'select-expanded': isExpanded,
+      } }, h("div", { "aria-hidden": "true", class: selectTextClasses, part: textPart }, selectText), h("div", { class: "select-icon", role: "presentation", part: "icon" }, h("div", { class: "select-icon-inner" })), h("label", { id: labelId }, displayLabel), h("button", { type: "button", disabled: disabled, id: inputId, "aria-labelledby": labelId, "aria-haspopup": "listbox", "aria-expanded": `${isExpanded}`, onFocus: this.onFocus, onBlur: this.onBlur, ref: (focusEl) => (this.focusEl = focusEl) })));
   }
   get el() { return getElement(this); }
   static get watchers() { return {
@@ -409,7 +416,7 @@ const isOptionSelected = (currentValue, compareValue, compareWith) => {
     return false;
   }
   if (Array.isArray(currentValue)) {
-    return currentValue.some(val => compareOptions(val, compareValue, compareWith));
+    return currentValue.some((val) => compareOptions(val, compareValue, compareWith));
   }
   else {
     return compareOptions(currentValue, compareValue, compareWith);
@@ -417,9 +424,7 @@ const isOptionSelected = (currentValue, compareValue, compareWith) => {
 };
 const getOptionValue = (el) => {
   const value = el.value;
-  return (value === undefined)
-    ? el.textContent || ''
-    : value;
+  return value === undefined ? el.textContent || '' : value;
 };
 const parseValue = (value) => {
   if (value == null) {
@@ -447,8 +452,8 @@ const generateText = (opts, value, compareWith) => {
   }
   if (Array.isArray(value)) {
     return value
-      .map(v => textForValue(opts, v, compareWith))
-      .filter(opt => opt !== null)
+      .map((v) => textForValue(opts, v, compareWith))
+      .filter((opt) => opt !== null)
       .join(', ');
   }
   else {
@@ -456,12 +461,10 @@ const generateText = (opts, value, compareWith) => {
   }
 };
 const textForValue = (opts, value, compareWith) => {
-  const selectOpt = opts.find(opt => {
+  const selectOpt = opts.find((opt) => {
     return compareOptions(getOptionValue(opt), value, compareWith);
   });
-  return selectOpt
-    ? selectOpt.textContent
-    : null;
+  return selectOpt ? selectOpt.textContent : null;
 };
 let selectIds = 0;
 const OPTION_CLASS = 'select-interface-option';
@@ -482,7 +485,7 @@ const SelectOption = class {
     this.disabled = false;
   }
   render() {
-    return (h(Host, { role: "option", id: this.inputId, class: getIonMode(this) }));
+    return h(Host, { role: "option", id: this.inputId, class: getIonMode(this) });
   }
   get el() { return getElement(this); }
 };

package/dist/esm/ion-skeleton-text.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host, e as getElement } from './index-5568e3fa.js';
-import { c as config, g as getIonMode } from './ionic-global-0939c477.js';
-import { h as hostContext } from './theme-c336c9d9.js';
+import { r as registerInstance, h, H as Host, e as getElement } from './index-c04b9ed5.js';
+import { c as config, g as getIonMode } from './ionic-global-4903e23e.js';
+import { h as hostContext } from './theme-7ef00c83.js';
 
 const skeletonTextCss = ":host{--background:rgba(var(--background-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.065);border-radius:var(--border-radius, inherit);display:block;width:100%;height:inherit;margin-top:4px;margin-bottom:4px;background:var(--background);line-height:10px;user-select:none;pointer-events:none}span{display:inline-block}:host(.in-media){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;height:100%}:host(.skeleton-text-animated){position:relative;background:linear-gradient(to right, rgba(var(--background-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.065) 8%, rgba(var(--background-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.135) 18%, rgba(var(--background-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.065) 33%);background-size:800px 104px;animation-duration:1s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:shimmer;animation-timing-function:linear}@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}";
 
@@ -19,7 +19,7 @@ const SkeletonText = class {
     return (h(Host, { class: {
         [mode]: true,
         'skeleton-text-animated': animated,
-        'in-media': inMedia
+        'in-media': inMedia,
       } }, h("span", null, "\u00A0")));
   }
   get el() { return getElement(this); }

package/dist/esm/ion-slide.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host } from './index-5568e3fa.js';
-import { g as getIonMode } from './ionic-global-0939c477.js';
+import { r as registerInstance, h, H as Host } from './index-c04b9ed5.js';
+import { g as getIonMode } from './ionic-global-4903e23e.js';
 
 const slideCss = "ion-slide{display:block;width:100%;height:100%}.slide-zoom{display:block;width:100%;text-align:center}.swiper-slide{display:flex;position:relative;flex-shrink:0;align-items:center;justify-content:center;width:100%;height:100%;font-size:18px;text-align:center;box-sizing:border-box}.swiper-slide img{width:auto;max-width:100%;height:auto;max-height:100%}";
 
@@ -12,7 +12,7 @@ const Slide = class {
     return (h(Host, { class: {
         [mode]: true,
         'swiper-slide': true,
-        'swiper-zoom-container': true
+        'swiper-zoom-container': true,
       } }));
   }
 };