@xdam/ember-partials 3.0.1 → 4.0.1

package/addon/components/xep-menu.js

@@ -5,7 +5,6 @@ import { Corner } from '@material/menu-surface';
 import { MDCMenu } from '@material/menu';
 import { inject as service } from '@ember/service';
 import { addEventListener, runDisposables } from 'ember-lifeline';
-import classic from 'ember-classic-decorator';
 
 import updateDirtyProps from '@xdam/ember-partials/utils/update-dirty-props';
 
@@ -18,7 +17,7 @@ import updateDirtyProps from '@xdam/ember-partials/utils/update-dirty-props';
  * @yield {Hash} menu
  * @yield {XepList} menu.list Menu content requires using XepList component
  */
-@classic
+
 @layout(template)
 @classNames('xep-menu', 'mdc-menu', 'mdc-menu-surface')
 export default class XepMenuComponent extends Component {
@@ -98,7 +97,10 @@ export default class XepMenuComponent extends Component {
       }
 
       if (this.absolutePosition) {
-        this.mdcComponent.setAbsolutePosition(this.absolutePosition.x, this.absolutePosition.y);
+        this.mdcComponent.setAbsolutePosition(
+          this.absolutePosition.x,
+          this.absolutePosition.y,
+        );
       }
     }
 
@@ -117,8 +119,12 @@ export default class XepMenuComponent extends Component {
 
     this.setupPositioning();
 
-    addEventListener(this, this.element, 'MDCMenuSurface:closed', () => this.set('open', false));
-    addEventListener(this, this.element, 'MDCList:action', () => this.set('open', false));
+    addEventListener(this, this.element, 'MDCMenuSurface:closed', () =>
+      this.set('open', false),
+    );
+    addEventListener(this, this.element, 'MDCList:action', () =>
+      this.set('open', false),
+    );
 
     if (this.register) {
       this.xepManager.registerComponent(this, this.register);
@@ -126,6 +132,7 @@ export default class XepMenuComponent extends Component {
   }
 
   didReceiveAttrs() {
+    super.didReceiveAttrs();
     if (this.mdcComponent) {
       updateDirtyProps(this.trackedProps, this, this.mdcComponent);
     }

package/addon/components/xep-radio.js

@@ -6,7 +6,6 @@ import { MDCRadio } from '@material/radio';
 import { guidFor } from '@ember/object/internals';
 import { inject as service } from '@ember/service';
 import { addEventListener, runDisposables } from 'ember-lifeline';
-import classic from 'ember-classic-decorator';
 
 import updateDirtyProps from '@xdam/ember-partials/utils/update-dirty-props';
 
@@ -16,7 +15,6 @@ import updateDirtyProps from '@xdam/ember-partials/utils/update-dirty-props';
  * @class XepRadio
  * @public
  */
-@classic
 @layout(template)
 @classNames('xep-radio', 'mdc-form-field')
 export default class XepRadioComponent extends Component {
@@ -80,16 +78,22 @@ export default class XepRadioComponent extends Component {
    */
   register;
 
-  trackedProps = ['disabled', 'checked', 'value']
+  trackedProps = ['disabled', 'checked', 'value'];
 
   didInsertElement() {
     super.didInsertElement(...arguments);
 
-    this.mdcComponent = this.mdcComponent || new MDCRadio(this.element.querySelector('.mdc-radio'));
+    this.mdcComponent =
+      this.mdcComponent ||
+      new MDCRadio(this.element.querySelector('.mdc-radio'));
     updateDirtyProps(this.trackedProps, this, this.mdcComponent);
 
-    const nativeInput = this.element.querySelector('.mdc-radio__native-control');
-    addEventListener(this, nativeInput, 'change', evt => this.set('checked', evt.srcElement.checked));
+    const nativeInput = this.element.querySelector(
+      '.mdc-radio__native-control',
+    );
+    addEventListener(this, nativeInput, 'change', (evt) =>
+      this.set('checked', evt.srcElement.checked),
+    );
 
     if (this.register) {
       this.xepManager.registerComponent(this, this.register);
@@ -97,6 +101,7 @@ export default class XepRadioComponent extends Component {
   }
 
   didReceiveAttrs() {
+    super.didReceiveAttrs();
     if (this.mdcComponent) {
       updateDirtyProps(this.trackedProps, this, this.mdcComponent);
     }

package/addon/components/xep-slider.js

@@ -1,5 +1,9 @@
+import { set } from '@ember/object';
 import {
-  classNames, layout, attribute, className,
+  classNames,
+  layout,
+  attribute,
+  className,
 } from '@ember-decorators/component';
 import Component from '@ember/component';
 import template from '@xdam/ember-partials/templates/components/xep-slider';
@@ -8,7 +12,6 @@ import { alias } from '@ember/object/computed';
 import EmberObject, { computed } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { addEventListener, runDisposables } from 'ember-lifeline';
-import classic from 'ember-classic-decorator';
 
 import updateDirtyProps from '@xdam/ember-partials/utils/update-dirty-props';
 
@@ -27,7 +30,7 @@ const VARIANT_TYPES = {
  * @class XepSlider
  * @public
  */
-@classic
+
 @layout(template)
 @classNames('xep-slider', 'mdc-slider')
 export default class XepSliderComponent extends Component {
@@ -182,11 +185,12 @@ export default class XepSliderComponent extends Component {
   didInsertElement() {
     super.didInsertElement(...arguments);
 
-    this.mdcComponent = new MDCSlider(this.element);
+    set(this, 'mdcComponent', new MDCSlider(this.element));
     updateDirtyProps(this.trackedProps, this, this.mdcComponent);
 
-    addEventListener(this, this.element, 'MDCSlider:change',
-      () => updateDirtyProps(this.trackedProps, this.mdcComponent, this));
+    addEventListener(this, this.element, 'MDCSlider:change', () =>
+      updateDirtyProps(this.trackedProps, this.mdcComponent, this),
+    );
 
     if (this.register) {
       this.xepManager.registerComponent(this, this.register);
@@ -194,6 +198,7 @@ export default class XepSliderComponent extends Component {
   }
 
   didReceiveAttrs() {
+    super.didReceiveAttrs();
     if (this.mdcComponent) {
       updateDirtyProps(this.trackedProps, this, this.mdcComponent);
     }

package/addon/components/xep-snackbar.js

@@ -1,11 +1,13 @@
 import {
-  classNames, layout, attribute, className,
+  classNames,
+  layout,
+  attribute,
+  className,
 } from '@ember-decorators/component';
 import Component from '@ember/component';
 import template from '@xdam/ember-partials/templates/components/xep-snackbar';
 import { MDCSnackbar } from '@material/snackbar';
 import { inject as service } from '@ember/service';
-import classic from 'ember-classic-decorator';
 
 import updateDirtyProps from '@xdam/ember-partials/utils/update-dirty-props';
 
@@ -18,7 +20,7 @@ import updateDirtyProps from '@xdam/ember-partials/utils/update-dirty-props';
  * @class XepSnackbar
  * @public
  */
-@classic
+
 @layout(template)
 @classNames('xep-snackbar', 'mdc-snackbar')
 export default class XepSnackbarComponent extends Component {
@@ -84,7 +86,12 @@ export default class XepSnackbarComponent extends Component {
    */
   register;
 
-  trackedProps = ['closeOnEscape', 'timeoutMs', 'labelText', 'actionButtonText'];
+  trackedProps = [
+    'closeOnEscape',
+    'timeoutMs',
+    'labelText',
+    'actionButtonText',
+  ];
 
   didInsertElement() {
     super.didInsertElement(...arguments);
@@ -97,6 +104,7 @@ export default class XepSnackbarComponent extends Component {
   }
 
   didReceiveAttrs() {
+    super.didReceiveAttrs();
     if (this.mdcComponent) {
       updateDirtyProps(this.trackedProps, this, this.mdcComponent);
     }

package/addon/components/xep-switch.js

@@ -5,7 +5,6 @@ import { MDCSwitch } from '@material/switch';
 import { guidFor } from '@ember/object/internals';
 import { inject as service } from '@ember/service';
 import { runDisposables } from 'ember-lifeline';
-import classic from 'ember-classic-decorator';
 
 import updateDirtyProps from '@xdam/ember-partials/utils/update-dirty-props';
 
@@ -15,7 +14,7 @@ import updateDirtyProps from '@xdam/ember-partials/utils/update-dirty-props';
  * @class XepSwitch
  * @public
  */
-@classic
+
 @layout(template)
 @classNames('xep-switch')
 export default class XepSwitchComponent extends Component {
@@ -65,11 +64,13 @@ export default class XepSwitchComponent extends Component {
    */
   label;
 
-  trackedProps = ['disabled', 'checked']
+  trackedProps = ['disabled', 'checked'];
 
   didInsertElement() {
     super.didInsertElement(...arguments);
-    this.mdcComponent = this.mdcComponent || new MDCSwitch(this.element.querySelector('.mdc-switch'));
+    this.mdcComponent =
+      this.mdcComponent ||
+      new MDCSwitch(this.element.querySelector('.mdc-switch'));
     updateDirtyProps(this.trackedProps, this, this.mdcComponent);
 
     if (this.register) {
@@ -78,6 +79,7 @@ export default class XepSwitchComponent extends Component {
   }
 
   didReceiveAttrs() {
+    super.didReceiveAttrs();
     if (this.mdcComponent) {
       updateDirtyProps(this.trackedProps, this, this.mdcComponent);
     }

package/addon/components/xep-textarea.js

@@ -1,12 +1,14 @@
 import {
-  attribute, classNames, className, layout,
+  attribute,
+  classNames,
+  className,
+  layout,
 } from '@ember-decorators/component';
 import Component from '@ember/component';
 import { MDCTextField, MDCTextFieldHelperText } from '@material/textfield';
 import template from '@xdam/ember-partials/templates/components/xep-textarea';
 import { guidFor } from '@ember/object/internals';
 import { inject as service } from '@ember/service';
-import classic from 'ember-classic-decorator';
 
 /**
  * Component `<textarea>` element. Implements [material design's
@@ -16,7 +18,7 @@ import classic from 'ember-classic-decorator';
  * @class XepTextarea
  * @public
  */
-@classic
+
 @layout(template)
 @classNames('xep-textarea', 'mdc-text-field', 'mdc-text-field--textarea')
 export default class XepTextareaComponent extends Component {
@@ -273,8 +275,13 @@ export default class XepTextareaComponent extends Component {
     this.mdcComponent = new MDCTextField(this.element);
 
     if (this.helperText) {
-      this._mdcHelperText = new MDCTextFieldHelperText(this.element.querySelector('.mdc-text-field-helper-text'));
-      this.element.insertAdjacentElement('afterend', this.element.querySelector('.mdc-text-field-helper-text'));
+      this._mdcHelperText = new MDCTextFieldHelperText(
+        this.element.querySelector('.mdc-text-field-helper-text'),
+      );
+      this.element.insertAdjacentElement(
+        'afterend',
+        this.element.querySelector('.mdc-text-field-helper-text'),
+      );
     }
 
     if (this.register) {

package/addon/components/xep-toolbar-item-icon.js

@@ -1,6 +1,9 @@
 import Component from '@ember/component';
 import {
-  classNames, layout, tagName, attribute,
+  classNames,
+  layout,
+  tagName,
+  attribute,
 } from '@ember-decorators/component';
 import template from '@xdam/ember-partials/templates/components/xep-toolbar-item-icon';
 

package/addon/components/xep-toolbar-item-text.js

@@ -1,6 +1,9 @@
 import Component from '@ember/component';
 import {
-  classNames, layout, tagName, attribute,
+  classNames,
+  layout,
+  tagName,
+  attribute,
 } from '@ember-decorators/component';
 import template from '@xdam/ember-partials/templates/components/xep-toolbar-item-text';
 

package/addon/components/xep-toolbar-section.js

@@ -1,6 +1,10 @@
 import Component from '@ember/component';
 import {
-  classNames, layout, tagName, className, attribute,
+  classNames,
+  layout,
+  tagName,
+  className,
+  attribute,
 } from '@ember-decorators/component';
 import template from '@xdam/ember-partials/templates/components/xep-toolbar-section';
 import EmberObject, { computed } from '@ember/object';
@@ -63,7 +67,6 @@ export default class XepToolbarSectionComponent extends Component {
     return this.alignTypeMap[this.align];
   }
 
-
   /**
    * Define the section flex sizing. Defaults to `"grow"`.
    * @argument [flex]

package/addon/components/xep-toolbar.js

@@ -1,11 +1,13 @@
 import {
-  classNames, layout, className, attribute,
+  classNames,
+  layout,
+  className,
+  attribute,
 } from '@ember-decorators/component';
 import template from '@xdam/ember-partials/templates/components/xep-toolbar';
 import Component from '@ember/component';
 import EmberObject, { computed } from '@ember/object';
 import { inject as service } from '@ember/service';
-import classic from 'ember-classic-decorator';
 
 import styleString from '@xdam/ember-partials/utils/style-string';
 
@@ -25,7 +27,6 @@ const VARIANT_TYPES = {
  * @yield {Hash} toolbar
  * @yield {Hash} toolbar.section
  */
-@classic
 @layout(template)
 @classNames('xep-toolbar')
 export default class XepToolbarComponent extends Component {

package/addon/mixins/xep-resize.js

@@ -35,7 +35,7 @@ export default Mixin.create({
    * @return {Void}
    */
   // eslint-disable-next-line no-unused-vars
-  didResizeElement(contentRect) { },
+  didResizeElement(contentRect) {},
 
   registerResizeObserver: on('didInsertElement', function () {
     this.xepManager._registerResizeObserved(this);

package/addon/services/xep-manager.js

@@ -1,7 +1,7 @@
 import Service from '@ember/service';
 import Evented from '@ember/object/evented';
 import { action } from '@ember/object';
-import ResizeObserver from 'resize-observer-polyfill';
+// import ResizeObserver from 'resize-observer-polyfill';
 
 /**
  * A service for managing xep components

package/addon/templates/components/xep-avatar.hbs

@@ -3,7 +3,6 @@
     class="xep-avatar__image"
     src={{@image}}
     alt={{this.name}}
-    role="img"
   >
 {{else}}
   <div class="xep-avatar__text">

package/addon/templates/components/xep-checkbox.hbs

@@ -2,7 +2,7 @@
   <Input
     class="mdc-checkbox__native-control"
     @type="checkbox"
-    @id={{this.checkboxId}}
+    id={{this.checkboxId}}
     @checked={{@checked}}
     disabled={{@disabled}}
   />

package/addon/templates/components/xep-input.hbs

@@ -6,7 +6,7 @@
 {{!-- template-lint-disable no-positive-tabindex --}}
 <Input
   class="mdc-text-field__input"
-  @id={{this.inputId}}
+  id={{this.inputId}}
   @type={{@type}}
   @value={{@value}}
   placeholder={{@placeholder}}
@@ -23,11 +23,8 @@
   multiple={{@multiple}}
   readonly={{@readonly}}
   spellcheck={{@spellcheck}}
-  {{on "keyDown" (optional @handleKeyDown)}}
-  @focus-in={{optional @handleFocusIn}}
-  @focus-out={{optional @handleFocusOut}}
-  {{on "change" (optional @handleChange)}}
-  {{on "input" (optional @handleInput)}}
+  {{on "keydown" (optional @handleKeyDown)}} {{on "change" (optional @handleChange)}}
+  {{on "input" (optional @handleInput)}} {{on "focusin" (optional @handleFocusIn)}} {{on "focusout" (optional @handleFocusOut)}}
 />
 
 {{#if (and @label (not @outlined))}}

package/addon/templates/components/xep-radio.hbs

@@ -1,8 +1,12 @@
+{{!-- template-lint-disable builtin-component-arguments --}}
+{{!-- FIXME(XDAM-6252): the rule wants @checked here, but @checked and @value
+     are mutually exclusive on the builtin <Input>. Resolving it is a public
+     API decision for xep-radio, not a lint fix. --}}
 <div class="mdc-radio">
   <Input
     class="mdc-radio__native-control"
     @type="radio"
-    @id={{this.radioId}}
+    id={{this.radioId}}
     checked={{@checked}}
     disabled={{@disabled}}
     @value={{@value}}

package/addon/templates/components/xep-switch.hbs

@@ -1,4 +1,13 @@
-<button id="basic-switch" class="mdc-switch mdc-switch--unselected" type="button" role="switch" aria-checked="false">
+{{!-- template-lint-disable require-presentational-children --}}
+{{!-- The svg icons inside the switch button are decorative and the DOM
+     structure is dictated by @material/switch. --}}
+<button
+  id={{this.switchId}}
+  class="mdc-switch mdc-switch--unselected"
+  type="button"
+  role="switch"
+  aria-checked="false"
+>
   <div class="mdc-switch__track"></div>
   <div class="mdc-switch__handle-track">
     <div class="mdc-switch__handle">

package/addon/templates/components/xep-textarea.hbs

@@ -2,8 +2,7 @@
 {{!-- template-lint-disable no-positive-tabindex --}}
 <Textarea
   class="mdc-text-field__input"
-  @id={{this.textareaId}}
-  @type={{@type}}
+  id={{this.textareaId}}
   @value={{@value}}
   placeholder={{@placeholder}}
   tabindex={{@tabindex}}

package/addon/utils/style-string.js

@@ -1,4 +1,5 @@
-import { htmlSafe, dasherize } from '@ember/string';
+import { dasherize } from '@ember/-internals/string';
+import { htmlSafe } from '@ember/template';
 
 // Lifted from React
 const isUnitlessNumber = {
@@ -59,7 +60,8 @@ function transformStyleValue(key, value) {
  * @param {HTMLElement} element The element to extract current styles from
  */
 function deserializeStyleString(styles = {}, element) {
-  const currentStylesObj = element.style.cssText.split(';')
+  const currentStylesObj = element.style.cssText
+    .split(';')
     .reduce((prev, curr) => {
       const [key, value] = curr.split(':');
 
@@ -84,7 +86,11 @@ export default function styleString(styles = {}, element) {
     styles = deserializeStyleString(styles, element);
   }
 
-  if (styles !== null && typeof styles === 'object' && styles.length === undefined) {
+  if (
+    styles !== null &&
+    typeof styles === 'object' &&
+    styles.length === undefined
+  ) {
     let string = Object.entries(styles)
       .map(([key, value]) => transformStyleValue(key, value))
       .join(';');

package/addon/utils/update-dirty-props.js

@@ -1,4 +1,3 @@
-
 /**
  * Update Dirty Props: Update some object with specific properties from another object
  *
@@ -7,11 +6,17 @@
  * @param {Object} target The object which will receive new properties
  */
 export default function updateDirtyProps(props, source, target) {
-  if (!target) { throw new Error('target parameter is undefined'); }
-  if (!source) { throw new Error('source parameter is undefined'); }
+  if (!target) {
+    throw new Error('target parameter is undefined');
+  }
+  if (!source) {
+    throw new Error('source parameter is undefined');
+  }
 
   props.forEach((prop) => {
-    if (typeof source[prop] === 'undefined') { return; }
+    if (typeof source[prop] === 'undefined') {
+      return;
+    }
 
     if (target[prop] !== source[prop]) {
       if (target.set && target.set.call) {

package/app/components/xep-checkbox.js

@@ -1 +1,2 @@
+import '@material/checkbox';
 export { default } from '@xdam/ember-partials/components/xep-checkbox';

package/app/components/xep-chip-set.js

@@ -1 +1,2 @@
+import '@material/chips';
 export { default } from '@xdam/ember-partials/components/xep-chip-set';

package/app/components/xep-dialog.js

@@ -1 +1,2 @@
+import '@material/dialog';
 export { default } from '@xdam/ember-partials/components/xep-dialog';

package/app/components/xep-drawer.js

@@ -1 +1,2 @@
+import '@material/drawer';
 export { default } from '@xdam/ember-partials/components/xep-drawer';

package/app/components/xep-input.js

@@ -1 +1,2 @@
+import '@material/textfield';
 export { default } from '@xdam/ember-partials/components/xep-input';

package/app/components/xep-list.js

@@ -1 +1,2 @@
+import '@material/list';
 export { default } from '@xdam/ember-partials/components/xep-list';