From 0c27d34578027b5260d2151b1c3c6cab26fbd685 Mon Sep 17 00:00:00 2001 From: Chris Manson Date: Tue, 1 Oct 2024 09:43:37 +0100 Subject: [PATCH] run ember-component-template-colocation-migrator --- .../components/paper-backdrop.hbs | 0 addon/components/paper-backdrop.js | 10 +- .../components/paper-button.hbs | 0 addon/components/paper-button.js | 26 +- .../components/paper-card-actions.hbs | 0 addon/components/paper-card-actions.js | 7 +- .../components/paper-card-header-text.hbs | 0 addon/components/paper-card-header-text.js | 7 +- .../components/paper-card-header.hbs | 0 addon/components/paper-card-header.js | 7 +- .../components/paper-card-media.hbs | 0 addon/components/paper-card-media.js | 7 +- .../components/paper-card-title-media.hbs | 0 addon/components/paper-card-title-media.js | 7 +- .../components/paper-card-title-text.hbs | 0 addon/components/paper-card-title-text.js | 7 +- .../components/paper-card-title.hbs | 0 addon/components/paper-card-title.js | 7 +- .../{templates => }/components/paper-card.hbs | 0 addon/components/paper-card.js | 7 +- .../components/paper-checkbox.hbs | 0 addon/components/paper-checkbox.js | 27 +- .../components/paper-dialog.hbs | 0 addon/components/paper-dialog.js | 21 +- .../{templates => }/components/paper-form.hbs | 0 addon/components/paper-form.js | 19 +- .../components/paper-grid-list.hbs | 0 addon/components/paper-grid-list.js | 76 ++-- .../components/paper-grid-tile-footer.hbs | 0 addon/components/paper-grid-tile-footer.js | 7 +- .../components/paper-grid-tile.hbs | 0 addon/components/paper-grid-tile.js | 48 ++- .../{templates => }/components/paper-icon.hbs | 0 addon/components/paper-icon.js | 27 +- .../components/paper-input.hbs | 0 addon/components/paper-input.js | 357 +++++++++--------- .../{templates => }/components/paper-item.hbs | 0 addon/components/paper-item.js | 18 +- .../components/paper-optgroup.hbs | 0 .../components/paper-option.hbs | 0 .../components/paper-progress-circular.hbs | 0 addon/components/paper-progress-circular.js | 138 +++++-- .../components/paper-progress-linear.hbs | 0 addon/components/paper-progress-linear.js | 41 +- .../components/paper-radio-base.hbs | 0 addon/components/paper-radio-base.js | 21 +- .../components/paper-radio-group-label.hbs | 0 addon/components/paper-radio-group-label.js | 7 +- .../components/paper-radio-group.hbs | 0 addon/components/paper-radio-group.js | 20 +- .../components/paper-reset-button.hbs | 0 addon/components/paper-reset-button.js | 10 +- .../components/paper-sidenav-inner.hbs | 0 addon/components/paper-sidenav-inner.js | 11 +- .../components/paper-sidenav-toggle.hbs | 0 addon/components/paper-sidenav-toggle.js | 9 +- .../components/paper-sidenav.hbs | 0 addon/components/paper-sidenav.js | 9 +- .../components/paper-speed-dial-actions.hbs | 0 addon/components/paper-speed-dial-actions.js | 6 +- .../components/paper-speed-dial.hbs | 0 addon/components/paper-speed-dial.js | 22 +- .../components/paper-subheader.hbs | 0 addon/components/paper-subheader.js | 7 +- .../components/paper-switch.hbs | 0 addon/components/paper-switch.js | 45 ++- .../{templates => }/components/paper-tab.hbs | 0 addon/components/paper-tab.js | 12 +- .../{templates => }/components/paper-tabs.hbs | 0 addon/components/paper-tabs.js | 41 +- .../components/paper-toast-inner.hbs | 0 addon/components/paper-toast-inner.js | 6 +- .../components/paper-toast.hbs | 0 addon/components/paper-toast.js | 38 +- .../components/paper-toaster.hbs | 0 addon/components/paper-toaster.js | 6 +- .../components/paper-toolbar.hbs | 0 addon/components/paper-toolbar.js | 6 +- .../components/paper-tooltip-inner.hbs | 0 addon/components/paper-tooltip-inner.js | 18 +- .../components/paper-tooltip.hbs | 0 addon/components/paper-tooltip.js | 27 +- 82 files changed, 655 insertions(+), 537 deletions(-) rename addon/{templates => }/components/paper-backdrop.hbs (100%) rename addon/{templates => }/components/paper-button.hbs (100%) rename addon/{templates => }/components/paper-card-actions.hbs (100%) rename addon/{templates => }/components/paper-card-header-text.hbs (100%) rename addon/{templates => }/components/paper-card-header.hbs (100%) rename addon/{templates => }/components/paper-card-media.hbs (100%) rename addon/{templates => }/components/paper-card-title-media.hbs (100%) rename addon/{templates => }/components/paper-card-title-text.hbs (100%) rename addon/{templates => }/components/paper-card-title.hbs (100%) rename addon/{templates => }/components/paper-card.hbs (100%) rename addon/{templates => }/components/paper-checkbox.hbs (100%) rename addon/{templates => }/components/paper-dialog.hbs (100%) rename addon/{templates => }/components/paper-form.hbs (100%) rename addon/{templates => }/components/paper-grid-list.hbs (100%) rename addon/{templates => }/components/paper-grid-tile-footer.hbs (100%) rename addon/{templates => }/components/paper-grid-tile.hbs (100%) rename addon/{templates => }/components/paper-icon.hbs (100%) rename addon/{templates => }/components/paper-input.hbs (100%) rename addon/{templates => }/components/paper-item.hbs (100%) rename addon/{templates => }/components/paper-optgroup.hbs (100%) rename addon/{templates => }/components/paper-option.hbs (100%) rename addon/{templates => }/components/paper-progress-circular.hbs (100%) rename addon/{templates => }/components/paper-progress-linear.hbs (100%) rename addon/{templates => }/components/paper-radio-base.hbs (100%) rename addon/{templates => }/components/paper-radio-group-label.hbs (100%) rename addon/{templates => }/components/paper-radio-group.hbs (100%) rename addon/{templates => }/components/paper-reset-button.hbs (100%) rename addon/{templates => }/components/paper-sidenav-inner.hbs (100%) rename addon/{templates => }/components/paper-sidenav-toggle.hbs (100%) rename addon/{templates => }/components/paper-sidenav.hbs (100%) rename addon/{templates => }/components/paper-speed-dial-actions.hbs (100%) rename addon/{templates => }/components/paper-speed-dial.hbs (100%) rename addon/{templates => }/components/paper-subheader.hbs (100%) rename addon/{templates => }/components/paper-switch.hbs (100%) rename addon/{templates => }/components/paper-tab.hbs (100%) rename addon/{templates => }/components/paper-tabs.hbs (100%) rename addon/{templates => }/components/paper-toast-inner.hbs (100%) rename addon/{templates => }/components/paper-toast.hbs (100%) rename addon/{templates => }/components/paper-toaster.hbs (100%) rename addon/{templates => }/components/paper-toolbar.hbs (100%) rename addon/{templates => }/components/paper-tooltip-inner.hbs (100%) rename addon/{templates => }/components/paper-tooltip.hbs (100%) diff --git a/addon/templates/components/paper-backdrop.hbs b/addon/components/paper-backdrop.hbs similarity index 100% rename from addon/templates/components/paper-backdrop.hbs rename to addon/components/paper-backdrop.hbs diff --git a/addon/components/paper-backdrop.js b/addon/components/paper-backdrop.js index 1ff63f5b7..e6b9d297e 100644 --- a/addon/components/paper-backdrop.js +++ b/addon/components/paper-backdrop.js @@ -1,16 +1,14 @@ -/* eslint-disable ember/no-classic-components, prettier/prettier */ +/* eslint-disable ember/no-classic-components */ /** * @module ember-paper */ import Component from '@ember/component'; -import layout from '../templates/components/paper-backdrop'; /** * @class PaperBackdrop * @extends Ember.Component * @uses TransitionMixin */ export default Component.extend({ - layout, tagName: '', // addDestroyedElementClone(original, clone) { @@ -21,6 +19,8 @@ export default Component.extend({ sendClickAction(onClick, e) { e.preventDefault(); - if (onClick) { onClick(e); } - } + if (onClick) { + onClick(e); + } + }, }); diff --git a/addon/templates/components/paper-button.hbs b/addon/components/paper-button.hbs similarity index 100% rename from addon/templates/components/paper-button.hbs rename to addon/components/paper-button.hbs diff --git a/addon/components/paper-button.js b/addon/components/paper-button.js index 53334ab2c..ca226b795 100644 --- a/addon/components/paper-button.js +++ b/addon/components/paper-button.js @@ -1,11 +1,10 @@ -/* eslint-disable ember/no-classic-components, ember/no-mixins, ember/require-tagless-components, prettier/prettier */ +/* eslint-disable ember/no-classic-components, ember/no-mixins, ember/require-tagless-components */ /** * @module ember-paper */ import { reads } from '@ember/object/computed'; import Component from '@ember/component'; -import layout from '../templates/components/paper-button'; import FocusableMixin from 'ember-paper/mixins/focusable-mixin'; import ColorMixin from 'ember-paper/mixins/color-mixin'; import ProxiableMixin from 'ember-paper/mixins/proxiable-mixin'; @@ -19,29 +18,26 @@ import { invokeAction } from 'ember-paper/utils/invoke-action'; * @uses ProxiableMixin */ export default Component.extend(FocusableMixin, ColorMixin, ProxiableMixin, { - layout, tagName: 'button', classNames: ['md-default-theme', 'md-button'], raised: false, iconButton: false, - fab: reads('mini'), // circular button + + // circular button + fab: reads('mini'), + mini: false, type: 'button', href: null, target: null, - attributeBindings: [ - 'type', - 'href', - 'target', - 'title', - 'download', - 'rel' - ], + + attributeBindings: ['type', 'href', 'target', 'title', 'download', 'rel'], + classNameBindings: [ 'raised:md-raised', 'iconButton:md-icon-button', 'fab:md-fab', - 'mini:md-mini' + 'mini:md-mini', ], init() { @@ -49,7 +45,7 @@ export default Component.extend(FocusableMixin, ColorMixin, ProxiableMixin, { if (this.href) { this.setProperties({ tagName: 'a', - type: null + type: null, }); } }, @@ -58,5 +54,5 @@ export default Component.extend(FocusableMixin, ColorMixin, ProxiableMixin, { invokeAction(this, 'onClick', e); // Prevent bubbling, if specified. If undefined, the event will bubble. return this.bubbles; - } + }, }); diff --git a/addon/templates/components/paper-card-actions.hbs b/addon/components/paper-card-actions.hbs similarity index 100% rename from addon/templates/components/paper-card-actions.hbs rename to addon/components/paper-card-actions.hbs diff --git a/addon/components/paper-card-actions.js b/addon/components/paper-card-actions.js index c90d7fc6a..5d0e52be0 100644 --- a/addon/components/paper-card-actions.js +++ b/addon/components/paper-card-actions.js @@ -1,17 +1,14 @@ -/* eslint-disable ember/no-classic-components, ember/no-component-lifecycle-hooks, ember/require-tagless-components, prettier/prettier */ +/* eslint-disable ember/no-classic-components, ember/no-component-lifecycle-hooks, ember/require-tagless-components */ /** * @module ember-paper */ import Component from '@ember/component'; -import layout from '../templates/components/paper-card-actions'; - /** * @class PaperCardActions * @extends Ember.Component */ export default Component.extend({ - layout, tagName: 'md-card-actions', classNameBindings: ['defaultClasses'], @@ -25,5 +22,5 @@ export default Component.extend({ if (!providedClasses || providedClasses.indexOf('layout-') === -1) { this.set('defaultClasses', 'layout-row layout-align-end-center'); } - } + }, }); diff --git a/addon/templates/components/paper-card-header-text.hbs b/addon/components/paper-card-header-text.hbs similarity index 100% rename from addon/templates/components/paper-card-header-text.hbs rename to addon/components/paper-card-header-text.hbs diff --git a/addon/components/paper-card-header-text.js b/addon/components/paper-card-header-text.js index a339f3a53..76fc93088 100644 --- a/addon/components/paper-card-header-text.js +++ b/addon/components/paper-card-header-text.js @@ -1,16 +1,13 @@ -/* eslint-disable ember/no-classic-components, ember/require-tagless-components, prettier/prettier */ +/* eslint-disable ember/no-classic-components, ember/require-tagless-components */ /** * @module ember-paper */ import Component from '@ember/component'; -import layout from '../templates/components/paper-card-header-text'; - /** * @class PaperCardheaderText * @extends Ember.Component */ export default Component.extend({ - layout, - tagName: 'md-card-header-text' + tagName: 'md-card-header-text', }); diff --git a/addon/templates/components/paper-card-header.hbs b/addon/components/paper-card-header.hbs similarity index 100% rename from addon/templates/components/paper-card-header.hbs rename to addon/components/paper-card-header.hbs diff --git a/addon/components/paper-card-header.js b/addon/components/paper-card-header.js index cf607db4f..c193b932b 100644 --- a/addon/components/paper-card-header.js +++ b/addon/components/paper-card-header.js @@ -1,16 +1,13 @@ -/* eslint-disable ember/no-classic-components, ember/require-tagless-components, prettier/prettier */ +/* eslint-disable ember/no-classic-components, ember/require-tagless-components */ /** * @module ember-paper */ import Component from '@ember/component'; -import layout from '../templates/components/paper-card-header'; - /** * @class PaperCardHeader * @extends Ember.Component */ export default Component.extend({ - layout, - tagName: 'md-card-header' + tagName: 'md-card-header', }); diff --git a/addon/templates/components/paper-card-media.hbs b/addon/components/paper-card-media.hbs similarity index 100% rename from addon/templates/components/paper-card-media.hbs rename to addon/components/paper-card-media.hbs diff --git a/addon/components/paper-card-media.js b/addon/components/paper-card-media.js index c4941a146..715e2da73 100644 --- a/addon/components/paper-card-media.js +++ b/addon/components/paper-card-media.js @@ -1,17 +1,14 @@ -/* eslint-disable ember/no-classic-components, prettier/prettier */ +/* eslint-disable ember/no-classic-components */ /** * @module ember-paper */ import Component from '@ember/component'; -import layout from '../templates/components/paper-card-media'; - /** * @class PaperCardMedia * @extends Ember.Component */ export default Component.extend({ - layout, tagName: '', - size: 'md' + size: 'md', }); diff --git a/addon/templates/components/paper-card-title-media.hbs b/addon/components/paper-card-title-media.hbs similarity index 100% rename from addon/templates/components/paper-card-title-media.hbs rename to addon/components/paper-card-title-media.hbs diff --git a/addon/components/paper-card-title-media.js b/addon/components/paper-card-title-media.js index 7198a4a5c..3f050efef 100644 --- a/addon/components/paper-card-title-media.js +++ b/addon/components/paper-card-title-media.js @@ -1,17 +1,14 @@ -/* eslint-disable ember/no-classic-components, ember/require-tagless-components, prettier/prettier */ +/* eslint-disable ember/no-classic-components, ember/require-tagless-components */ /** * @module ember-paper */ import Component from '@ember/component'; -import layout from '../templates/components/paper-card-title-media'; - /** * @class PaperCardTitleMedia * @extends Ember.Component */ export default Component.extend({ - layout, tagName: 'md-card-title-media', - size: 'md' + size: 'md', }); diff --git a/addon/templates/components/paper-card-title-text.hbs b/addon/components/paper-card-title-text.hbs similarity index 100% rename from addon/templates/components/paper-card-title-text.hbs rename to addon/components/paper-card-title-text.hbs diff --git a/addon/components/paper-card-title-text.js b/addon/components/paper-card-title-text.js index d895f48dd..30a5182c5 100644 --- a/addon/components/paper-card-title-text.js +++ b/addon/components/paper-card-title-text.js @@ -1,16 +1,13 @@ -/* eslint-disable ember/no-classic-components, ember/require-tagless-components, prettier/prettier */ +/* eslint-disable ember/no-classic-components, ember/require-tagless-components */ /** * @module ember-paper */ import Component from '@ember/component'; -import layout from '../templates/components/paper-card-title-text'; - /** * @class PaperCardTitleText * @extends Ember.Component */ export default Component.extend({ - layout, - tagName: 'md-card-title-text' + tagName: 'md-card-title-text', }); diff --git a/addon/templates/components/paper-card-title.hbs b/addon/components/paper-card-title.hbs similarity index 100% rename from addon/templates/components/paper-card-title.hbs rename to addon/components/paper-card-title.hbs diff --git a/addon/components/paper-card-title.js b/addon/components/paper-card-title.js index 48726d0de..fe80da305 100644 --- a/addon/components/paper-card-title.js +++ b/addon/components/paper-card-title.js @@ -1,16 +1,13 @@ -/* eslint-disable ember/no-classic-components, ember/require-tagless-components, prettier/prettier */ +/* eslint-disable ember/no-classic-components, ember/require-tagless-components */ /** * @module ember-paper */ import Component from '@ember/component'; -import layout from '../templates/components/paper-card-title'; - /** * @class PaperCardTitle * @extends Ember.Component */ export default Component.extend({ - layout, - tagName: 'md-card-title' + tagName: 'md-card-title', }); diff --git a/addon/templates/components/paper-card.hbs b/addon/components/paper-card.hbs similarity index 100% rename from addon/templates/components/paper-card.hbs rename to addon/components/paper-card.hbs diff --git a/addon/components/paper-card.js b/addon/components/paper-card.js index 61a44cf56..d3d820984 100644 --- a/addon/components/paper-card.js +++ b/addon/components/paper-card.js @@ -1,16 +1,13 @@ -/* eslint-disable ember/no-classic-components, ember/require-tagless-components, prettier/prettier */ +/* eslint-disable ember/no-classic-components, ember/require-tagless-components */ /** * @module ember-paper */ import Component from '@ember/component'; -import layout from '../templates/components/paper-card'; - /** * @class PaperCard * @extends Ember.Component */ export default Component.extend({ - layout, - tagName: 'md-card' + tagName: 'md-card', }); diff --git a/addon/templates/components/paper-checkbox.hbs b/addon/components/paper-checkbox.hbs similarity index 100% rename from addon/templates/components/paper-checkbox.hbs rename to addon/components/paper-checkbox.hbs diff --git a/addon/components/paper-checkbox.js b/addon/components/paper-checkbox.js index 04631edb9..50af5c3ae 100644 --- a/addon/components/paper-checkbox.js +++ b/addon/components/paper-checkbox.js @@ -1,4 +1,4 @@ -/* eslint-disable ember/no-classic-components, ember/no-get, ember/no-mixins, ember/require-tagless-components, prettier/prettier */ +/* eslint-disable ember/no-classic-components, ember/no-get, ember/no-mixins, ember/require-tagless-components */ /** * @module ember-paper */ @@ -8,7 +8,6 @@ import { computed } from '@ember/object'; import { not, and } from '@ember/object/computed'; import Component from '@ember/component'; import { assert } from '@ember/debug'; -import layout from '../templates/components/paper-checkbox'; import FocusableMixin from 'ember-paper/mixins/focusable-mixin'; import ColorMixin from 'ember-paper/mixins/color-mixin'; import ProxiableMixin from 'ember-paper/mixins/proxiable-mixin'; @@ -21,41 +20,44 @@ import { invokeAction } from 'ember-paper/utils/invoke-action'; * @uses ProxiableMixin */ export default Component.extend(FocusableMixin, ColorMixin, ProxiableMixin, { - layout, tagName: 'md-checkbox', classNames: ['md-checkbox', 'md-default-theme'], classNameBindings: ['isChecked:md-checked', 'indeterminate:md-indeterminate'], + attributeBindings: [ 'role:role', 'ariaLabel:aria-label', 'ariaChecked:aria-checked', - 'labelId:aria-labelledby' + 'labelId:aria-labelledby', ], /* FocusableMixin Overrides */ focusOnlyOnKey: true, constants: service(), - value: false, role: 'checkbox', - notIndeterminate: not('indeterminate'), isChecked: and('notIndeterminate', 'value'), - ariaChecked: computed('isChecked', 'indeterminate', function() { + + ariaChecked: computed('isChecked', 'indeterminate', function () { if (this.indeterminate) { return 'mixed'; } return this.isChecked ? 'true' : 'false'; }), - labelId: computed('elementId', function() { + + labelId: computed('elementId', function () { return `${this.elementId}-label`; }), init() { this._super(...arguments); - assert('{{paper-checkbox}} requires an `onChange` action or null for no action.', this.onChange !== undefined); + assert( + '{{paper-checkbox}} requires an `onChange` action or null for no action.', + this.onChange !== undefined + ); }, click() { @@ -67,7 +69,10 @@ export default Component.extend(FocusableMixin, ColorMixin, ProxiableMixin, { }, keyPress(ev) { - if (ev.which === this.get('constants.KEYCODE.SPACE') || ev.which === this.get('constants.KEYCODE.ENTER')) { + if ( + ev.which === this.get('constants.KEYCODE.SPACE') || + ev.which === this.get('constants.KEYCODE.ENTER') + ) { ev.preventDefault(); this.click(); } @@ -75,5 +80,5 @@ export default Component.extend(FocusableMixin, ColorMixin, ProxiableMixin, { processProxy() { invokeAction(this, 'onChange', !this.value); - } + }, }); diff --git a/addon/templates/components/paper-dialog.hbs b/addon/components/paper-dialog.hbs similarity index 100% rename from addon/templates/components/paper-dialog.hbs rename to addon/components/paper-dialog.hbs diff --git a/addon/components/paper-dialog.js b/addon/components/paper-dialog.js index 0df32c9cb..d841c8fae 100644 --- a/addon/components/paper-dialog.js +++ b/addon/components/paper-dialog.js @@ -1,4 +1,4 @@ -/* eslint-disable ember/no-actions-hash, ember/no-classic-components, ember/no-component-lifecycle-hooks, ember/require-computed-property-dependencies, prettier/prettier */ +/* eslint-disable ember/no-actions-hash, ember/no-classic-components, ember/no-component-lifecycle-hooks, ember/require-computed-property-dependencies */ /** * @module ember-paper */ @@ -6,7 +6,6 @@ import { or } from '@ember/object/computed'; import Component from '@ember/component'; import { computed } from '@ember/object'; import { getOwner } from '@ember/application'; -import layout from '../templates/components/paper-dialog'; import { invokeAction } from 'ember-paper/utils/invoke-action'; /** @@ -14,15 +13,14 @@ import { invokeAction } from 'ember-paper/utils/invoke-action'; * @extends Ember.Component */ export default Component.extend({ - layout, tagName: '', - escapeToClose: true, focusOnOpen: true, opaque: true, // Calculate a default that is always valid for the parent of the backdrop. wormholeSelector: '#paper-wormhole', + defaultedParent: or('parent', 'wormholeSelector'), // Calculate a default that is always valid where the opening transition should originate. @@ -33,14 +31,15 @@ export default Component.extend({ // Calculate the id of the wormhole destination, setting it if need be. The // id is that of the 'parent', if provided, or 'paper-wormhole' if not. - destinationId: computed('defaultedParent', function() { + destinationId: computed('defaultedParent', function () { let config = getOwner(this).resolveRegistration('config:environment'); if (config.environment === 'test' && !this.parent) { return '#ember-testing'; } let parent = this.defaultedParent; - let parentEle = typeof parent === 'string' ? document.querySelector(parent) : parent; + let parentEle = + typeof parent === 'string' ? document.querySelector(parent) : parent; // If the parentEle isn't found, assume that it is an id, but that the DOM doesn't // exist yet. This only happens during integration tests or if entire application // route is a dialog. @@ -54,18 +53,16 @@ export default Component.extend({ } return `#${id}`; } - }), // Find the element referenced by destinationId - destinationEl: computed('destinationId', function() { + destinationEl: computed('destinationId', function () { return document.querySelector(this.destinationId); }), didInsertElement() { this._super(...arguments); if (this.escapeToClose) { - this._destinationEle = document.querySelector(this.destinationId); this._onKeyDown = (e) => { if (e.keyCode === 27 && this.onClose) { @@ -73,7 +70,6 @@ export default Component.extend({ } }; this._destinationEle.addEventListener('keydown', this._onKeyDown); - } }, @@ -90,7 +86,6 @@ export default Component.extend({ if (this.clickOutsideToClose && this.onClose) { invokeAction(this, 'onClose'); } - } - } + }, + }, }); - diff --git a/addon/templates/components/paper-form.hbs b/addon/components/paper-form.hbs similarity index 100% rename from addon/templates/components/paper-form.hbs rename to addon/components/paper-form.hbs diff --git a/addon/components/paper-form.js b/addon/components/paper-form.js index 70dc3469a..9ab8df345 100644 --- a/addon/components/paper-form.js +++ b/addon/components/paper-form.js @@ -1,10 +1,9 @@ -/* eslint-disable ember/classic-decorator-no-classic-methods, ember/no-classic-components, ember/no-computed-properties-in-native-classes, ember/no-mixins, prettier/prettier */ -import { tagName, layout as templateLayout } from '@ember-decorators/component'; +/* eslint-disable ember/classic-decorator-no-classic-methods, ember/no-classic-components, ember/no-computed-properties-in-native-classes, ember/no-mixins */ +import { tagName } from '@ember-decorators/component'; import { action, computed } from '@ember/object'; import { and, not } from '@ember/object/computed'; import Component from '@ember/component'; -import layout from '../templates/components/paper-form'; import ParentMixin from 'ember-paper/mixins/parent-mixin'; import { invokeAction } from 'ember-paper/utils/invoke-action'; @@ -13,7 +12,6 @@ import { invokeAction } from 'ember-paper/utils/invoke-action'; * @extends Ember.Component * @uses ParentMixin */ -@templateLayout(layout) @tagName('form') export default class PaperForm extends Component.extend(ParentMixin) { inputComponent = 'paper-input'; @@ -44,8 +42,17 @@ export default class PaperForm extends Component.extend(ParentMixin) { @action localOnValidityChange() { - if (this.lastIsValid !== this.isValid || this.lastIsTouched !== this.isTouched) { - invokeAction(this, 'onValidityChange', this.isValid, this.isTouched, this.isInvalidAndTouched); + if ( + this.lastIsValid !== this.isValid || + this.lastIsTouched !== this.isTouched + ) { + invokeAction( + this, + 'onValidityChange', + this.isValid, + this.isTouched, + this.isInvalidAndTouched + ); this.set('lastIsValid', this.isValid); this.set('lastIsTouched', this.isTouched); } diff --git a/addon/templates/components/paper-grid-list.hbs b/addon/components/paper-grid-list.hbs similarity index 100% rename from addon/templates/components/paper-grid-list.hbs rename to addon/components/paper-grid-list.hbs diff --git a/addon/components/paper-grid-list.js b/addon/components/paper-grid-list.js index 063252ae8..823a387be 100644 --- a/addon/components/paper-grid-list.js +++ b/addon/components/paper-grid-list.js @@ -1,20 +1,20 @@ -/* eslint-disable ember/classic-decorator-no-classic-methods, ember/no-classic-components, ember/no-computed-properties-in-native-classes, ember/no-get, prettier/prettier */ +/* eslint-disable ember/classic-decorator-no-classic-methods, ember/no-classic-components, ember/no-computed-properties-in-native-classes, ember/no-get */ /** * @module ember-paper */ import { inject as service } from '@ember/service'; -import { tagName, layout } from '@ember-decorators/component'; +import { tagName } from '@ember-decorators/component'; import Component from '@ember/component'; import { computed } from '@ember/object'; import { bind, debounce } from '@ember/runloop'; -import template from '../templates/components/paper-grid-list'; import { ParentMixin } from 'ember-composability-tools'; import gridLayout from '../utils/grid-layout'; import { invokeAction } from 'ember-paper/utils/invoke-action'; const mediaRegex = /(^|\s)((?:print-)|(?:[a-z]{2}-){1,2})?(\d+)(?!\S)/g; -const rowHeightRegex = /(^|\s)((?:print-)|(?:[a-z]{2}-){1,2})?(\d+(?:[a-z]{2,3}|%)?|\d+:\d+|fit)(?!\S)/g; +const rowHeightRegex = + /(^|\s)((?:print-)|(?:[a-z]{2}-){1,2})?(\d+(?:[a-z]{2,3}|%)?|\d+:\d+|fit)(?!\S)/g; const unitCSS = (units) => { return `${units.share}% - (${units.gutter} * ${units.gutterShare})`; @@ -25,7 +25,7 @@ const dimensionCSS = (dimensions) => { }; const media = (mediaName) => { - return ((mediaName.charAt(0) !== '(') ? (`(${mediaName})`) : mediaName); + return mediaName.charAt(0) !== '(' ? `(${mediaName})` : mediaName; }; const mediaListenerName = (name) => { @@ -39,7 +39,6 @@ const applyStyles = (el, styles) => { }; @tagName('md-grid-list') -@layout(template) export default class PaperGridList extends Component.extend(ParentMixin) { @service constants; @@ -75,9 +74,12 @@ export default class PaperGridList extends Component.extend(ParentMixin) { this.set(`${listenerName}List`, mediaList); // Creates a function based on mediaName so that removeListener can remove it. - this.set(listenerName, bind(this, (result) => { - this._mediaDidChange(mediaName, result.matches); - })); + this.set( + listenerName, + bind(this, (result) => { + this._mediaDidChange(mediaName, result.matches); + }) + ); // Trigger initial grid calculations this._mediaDidChange(mediaName, mediaList.matches); @@ -103,7 +105,9 @@ export default class PaperGridList extends Component.extend(ParentMixin) { _updateCurrentMedia() { let mediaPriorities = this.get('constants.MEDIA_PRIORITY'); - let currentMedia = mediaPriorities.filter((mediaName) => this.get(mediaName)); + let currentMedia = mediaPriorities.filter((mediaName) => + this.get(mediaName) + ); this.set('currentMedia', currentMedia); this.updateGrid(); } @@ -128,7 +132,11 @@ export default class PaperGridList extends Component.extend(ParentMixin) { switch (rowMode) { case 'fixed': { - style.height = dimensionCSS({ unit: rowHeight, span: rowCount, gutter }); + style.height = dimensionCSS({ + unit: rowHeight, + span: rowCount, + gutter, + }); style.paddingBottom = ''; break; } @@ -137,10 +145,18 @@ export default class PaperGridList extends Component.extend(ParentMixin) { let hGutterShare = colCount === 1 ? 0 : (colCount - 1) / colCount; let hShare = (1 / colCount) * 100; let vShare = hShare * (1 / rowHeight); - let vUnit = unitCSS({ share: vShare, gutterShare: hGutterShare, gutter }); + let vUnit = unitCSS({ + share: vShare, + gutterShare: hGutterShare, + gutter, + }); style.height = ''; - style.paddingBottom = dimensionCSS({ unit: vUnit, span: rowCount, gutter }); + style.paddingBottom = dimensionCSS({ + unit: vUnit, + span: rowCount, + gutter, + }); break; } case 'fit': { @@ -166,10 +182,15 @@ export default class PaperGridList extends Component.extend(ParentMixin) { // Sorts tiles by their order in the dom orderedTiles() { // Convert NodeList to native javascript array, to be able to use indexOf. - let domTiles = Array.prototype.slice.call(this.element.querySelectorAll('md-grid-tile')); + let domTiles = Array.prototype.slice.call( + this.element.querySelectorAll('md-grid-tile') + ); return this.tiles.sort((a, b) => { - return domTiles.indexOf(a.get('element')) > domTiles.indexOf(b.get('element')) ? 1 : -1; + return domTiles.indexOf(a.get('element')) > + domTiles.indexOf(b.get('element')) + ? 1 + : -1; }); } @@ -207,23 +228,28 @@ export default class PaperGridList extends Component.extend(ParentMixin) { } @computed('colsMedia', 'currentMedia.[]') - get currentCols () { + get currentCols() { return this._getAttributeForMedia(this.colsMedia, this.currentMedia) || 1; } @computed('gutter') - get gutterMedia () { + get gutterMedia() { return this._extractResponsiveSizes(this.gutter, rowHeightRegex); } @computed('gutterMedia', 'currentMedia.[]') - get currentGutter () { - return this._applyDefaultUnit(this._getAttributeForMedia(this.gutterMedia, this.currentMedia) || 1); + get currentGutter() { + return this._applyDefaultUnit( + this._getAttributeForMedia(this.gutterMedia, this.currentMedia) || 1 + ); } @computed('rowHeight') - get rowHeightMedia () { - let rowHeights = this._extractResponsiveSizes(this.rowHeight, rowHeightRegex); + get rowHeightMedia() { + let rowHeights = this._extractResponsiveSizes( + this.rowHeight, + rowHeightRegex + ); if (Object.keys(rowHeights).length === 0) { throw new Error('md-grid-list: No valid rowHeight found'); } @@ -231,8 +257,11 @@ export default class PaperGridList extends Component.extend(ParentMixin) { } @computed('rowHeightMedia', 'currentMedia.[]') - get currentRowHeight () { - let rowHeight = this._getAttributeForMedia(this.rowHeightMedia, this.currentMedia); + get currentRowHeight() { + let rowHeight = this._getAttributeForMedia( + this.rowHeightMedia, + this.currentMedia + ); // eslint-disable-next-line ember/no-side-effects this.set('currentRowMode', this._getRowMode(rowHeight)); switch (this._getRowMode(rowHeight)) { @@ -264,5 +293,4 @@ export default class PaperGridList extends Component.extend(ParentMixin) { _applyDefaultUnit(val) { return /\D$/.test(val) ? val : `${val}px`; } - } diff --git a/addon/templates/components/paper-grid-tile-footer.hbs b/addon/components/paper-grid-tile-footer.hbs similarity index 100% rename from addon/templates/components/paper-grid-tile-footer.hbs rename to addon/components/paper-grid-tile-footer.hbs diff --git a/addon/components/paper-grid-tile-footer.js b/addon/components/paper-grid-tile-footer.js index 6e8446ad6..dff544207 100644 --- a/addon/components/paper-grid-tile-footer.js +++ b/addon/components/paper-grid-tile-footer.js @@ -1,16 +1,13 @@ -/* eslint-disable ember/no-classic-components, ember/require-tagless-components, prettier/prettier */ +/* eslint-disable ember/no-classic-components, ember/require-tagless-components */ /** * @module ember-paper */ import Component from '@ember/component'; -import layout from '../templates/components/paper-grid-tile-footer'; - /** * @class PaperGridTileFooter * @extends Ember.Component */ export default Component.extend({ - layout, - tagName: 'md-grid-tile-footer' + tagName: 'md-grid-tile-footer', }); diff --git a/addon/templates/components/paper-grid-tile.hbs b/addon/components/paper-grid-tile.hbs similarity index 100% rename from addon/templates/components/paper-grid-tile.hbs rename to addon/components/paper-grid-tile.hbs diff --git a/addon/components/paper-grid-tile.js b/addon/components/paper-grid-tile.js index 77606f31f..8d5cb8ea9 100644 --- a/addon/components/paper-grid-tile.js +++ b/addon/components/paper-grid-tile.js @@ -1,11 +1,10 @@ -/* eslint-disable ember/classic-decorator-no-classic-methods, ember/no-classic-components, ember/no-computed-properties-in-native-classes, ember/no-get, ember/require-computed-property-dependencies, prettier/prettier */ -import { tagName, layout as templateLayout } from '@ember-decorators/component'; +/* eslint-disable ember/classic-decorator-no-classic-methods, ember/no-classic-components, ember/no-computed-properties-in-native-classes, ember/no-get, ember/require-computed-property-dependencies */ +import { tagName } from '@ember-decorators/component'; import { computed } from '@ember/object'; import { alias } from '@ember/object/computed'; import Component from '@ember/component'; import { debounce } from '@ember/runloop'; -import layout from '../templates/components/paper-grid-tile'; import { ChildMixin } from 'ember-composability-tools'; import { invokeAction } from 'ember-paper/utils/invoke-action'; @@ -31,7 +30,6 @@ const applyStyles = (el, styles) => { * @class PaperGridTile * @extends Ember.Component */ -@templateLayout(layout) @tagName('md-grid-tile') export default class PaperGridTile extends Component.extend(ChildMixin) { @alias('parentComponent') @@ -57,7 +55,10 @@ export default class PaperGridTile extends Component.extend(ChildMixin) { @computed('colspanMedia', 'gridList.currentMedia.[]') get currentColspan() { - let colspan = this.gridList._getAttributeForMedia(this.colspanMedia, this.get('gridList.currentMedia')); + let colspan = this.gridList._getAttributeForMedia( + this.colspanMedia, + this.get('gridList.currentMedia') + ); return parseInt(colspan, 10) || 1; } @@ -68,7 +69,10 @@ export default class PaperGridTile extends Component.extend(ChildMixin) { @computed('rowspanMedia', 'gridList.currentMedia.[]') get currentRowspan() { - let rowspan = this.gridList._getAttributeForMedia(this.rowspanMedia, this.get('gridList.currentMedia')); + let rowspan = this.gridList._getAttributeForMedia( + this.rowspanMedia, + this.get('gridList.currentMedia') + ); return parseInt(rowspan, 10) || 1; } @@ -100,7 +104,7 @@ export default class PaperGridTile extends Component.extend(ChildMixin) { paddingTop: '', marginTop: '', top: '', - height: '' + height: '', }; let vShare, vUnit; @@ -108,8 +112,16 @@ export default class PaperGridTile extends Component.extend(ChildMixin) { switch (rowMode) { case 'fixed': { // In fixed mode, simply use the given rowHeight. - style.top = positionCSS({ unit: rowHeight, offset: position.row, gutter }); - style.height = dimensionCSS({ unit: rowHeight, span: currentRowspan, gutter }); + style.top = positionCSS({ + unit: rowHeight, + offset: position.row, + gutter, + }); + style.height = dimensionCSS({ + unit: rowHeight, + span: currentRowspan, + gutter, + }); break; } case 'ratio': { @@ -123,8 +135,16 @@ export default class PaperGridTile extends Component.extend(ChildMixin) { // paddingTop and marginTop are used to maintain the given aspect ratio, as // a percentage-based value for these properties is applied to the *width* of the // containing block. See http://www.w3.org/TR/CSS2/box.html#margin-properties - style.paddingTop = dimensionCSS({ unit: vUnit, span: currentRowspan, gutter }); - style.marginTop = positionCSS({ unit: vUnit, offset: position.row, gutter }); + style.paddingTop = dimensionCSS({ + unit: vUnit, + span: currentRowspan, + gutter, + }); + style.marginTop = positionCSS({ + unit: vUnit, + offset: position.row, + gutter, + }); break; } case 'fit': { @@ -138,7 +158,11 @@ export default class PaperGridTile extends Component.extend(ChildMixin) { vUnit = unitCSS({ share: vShare, gutterShare: vGutterShare, gutter }); style.top = positionCSS({ unit: vUnit, offset: position.row, gutter }); - style.height = dimensionCSS({ unit: vUnit, span: currentRowspan, gutter }); + style.height = dimensionCSS({ + unit: vUnit, + span: currentRowspan, + gutter, + }); break; } } diff --git a/addon/templates/components/paper-icon.hbs b/addon/components/paper-icon.hbs similarity index 100% rename from addon/templates/components/paper-icon.hbs rename to addon/components/paper-icon.hbs diff --git a/addon/components/paper-icon.js b/addon/components/paper-icon.js index 45c6765e1..0649da247 100644 --- a/addon/components/paper-icon.js +++ b/addon/components/paper-icon.js @@ -1,4 +1,4 @@ -/* eslint-disable ember/no-classic-components, ember/no-get-with-default, ember/no-mixins, ember/require-tagless-components, prettier/prettier */ +/* eslint-disable ember/no-classic-components, ember/no-get-with-default, ember/no-mixins, ember/require-tagless-components */ /** * @module ember-paper */ @@ -8,7 +8,6 @@ import { computed } from '@ember/object'; import { reads } from '@ember/object/computed'; import { htmlSafe } from '@ember/string'; -import layout from '../templates/components/paper-icon'; import ColorMixin from 'ember-paper/mixins/color-mixin'; /** @@ -17,17 +16,21 @@ import ColorMixin from 'ember-paper/mixins/color-mixin'; * @uses ColorMixin */ let PaperIconComponent = Component.extend(ColorMixin, { - layout, tagName: 'md-icon', classNames: ['paper-icon', 'md-font', 'material-icons', 'md-default-theme'], classNameBindings: ['spinClass'], - attributeBindings: ['aria-hidden', 'aria-label', 'title', 'sizeStyle:style', 'iconClass:md-font-icon'], - + attributeBindings: [ + 'aria-hidden', + 'aria-label', + 'title', + 'sizeStyle:style', + 'iconClass:md-font-icon', + ], icon: '', spin: false, reverseSpin: false, - iconClass: computed('icon', 'positionalIcon', function() { + iconClass: computed('icon', 'positionalIcon', function () { let icon = this.getWithDefault('positionalIcon', this.icon); return icon; }), @@ -35,7 +38,7 @@ let PaperIconComponent = Component.extend(ColorMixin, { 'aria-hidden': false, 'aria-label': reads('iconClass'), - spinClass: computed('spin', 'reverseSpin', function() { + spinClass: computed('spin', 'reverseSpin', function () { if (this.spin) { return 'md-spin'; } else if (this.reverseSpin) { @@ -45,19 +48,21 @@ let PaperIconComponent = Component.extend(ColorMixin, { } }), - sizeStyle: computed('size', function() { + sizeStyle: computed('size', function () { let size = this.size; if (size) { - return htmlSafe(`height: ${size}px; min-height: ${size}px; min-width: ${size}px; font-size: ${size}px; line-height: ${size}px;`); + return htmlSafe( + `height: ${size}px; min-height: ${size}px; min-width: ${size}px; font-size: ${size}px; line-height: ${size}px;` + ); } else { return null; } - }) + }), }); PaperIconComponent.reopenClass({ - positionalParams: ['positionalIcon'] + positionalParams: ['positionalIcon'], }); export default PaperIconComponent; diff --git a/addon/templates/components/paper-input.hbs b/addon/components/paper-input.hbs similarity index 100% rename from addon/templates/components/paper-input.hbs rename to addon/components/paper-input.hbs diff --git a/addon/components/paper-input.js b/addon/components/paper-input.js index 56773eb00..c4c8d0587 100644 --- a/addon/components/paper-input.js +++ b/addon/components/paper-input.js @@ -1,4 +1,4 @@ -/* eslint-disable ember/no-actions-hash, ember/no-classic-components, ember/no-component-lifecycle-hooks, ember/no-get, ember/no-mixins, ember/require-computed-property-dependencies, ember/require-tagless-components, prettier/prettier */ +/* eslint-disable ember/no-actions-hash, ember/no-classic-components, ember/no-component-lifecycle-hooks, ember/no-get, ember/no-mixins, ember/require-computed-property-dependencies, ember/require-tagless-components */ /** * @module ember-paper */ @@ -9,7 +9,6 @@ import { computed, set } from '@ember/object'; import { isEmpty } from '@ember/utils'; import { bind, next } from '@ember/runloop'; import { assert } from '@ember/debug'; -import layout from '../templates/components/paper-input'; import FocusableMixin from 'ember-paper/mixins/focusable-mixin'; import ColorMixin from 'ember-paper/mixins/color-mixin'; import ChildMixin from 'ember-paper/mixins/child-mixin'; @@ -24,189 +23,199 @@ import { invokeAction } from 'ember-paper/utils/invoke-action'; * @uses ColorMixin * @uses ValidationMixin */ -export default Component.extend(FocusableMixin, ColorMixin, ChildMixin, ValidationMixin, { - layout, - tagName: 'md-input-container', - classNames: ['md-default-theme'], - classNameBindings: [ - 'hasValue:md-input-has-value', - 'isInvalidAndTouched:md-input-invalid', - 'hasLeftIcon:md-icon-left', - 'hasRightIcon:md-icon-right', - 'focused:md-input-focused', - 'block:md-block', - 'placeholder:md-input-has-placeholder' - ], - type: 'text', - autofocus: false, - tabindex: null, - hideAllMessages: false, - isTouched: false, - - iconComponent: 'paper-icon', - - // override validation mixin `isInvalid` to account for the native input validity - isInvalid: or('hasErrorMessages', 'isNativeInvalid'), - - hasValue: computed('value', 'isNativeInvalid', function() { - let value = this.value; - let isNativeInvalid = this.isNativeInvalid; - return !isEmpty(value) || isNativeInvalid; - }), - - shouldAddPlaceholder: computed('label', 'focused', function() { - // if has label, only add placeholder when focused - return isEmpty(this.label) || this.focused; - }), - - inputElementId: computed('elementId', { - get() { - return `input-${this.elementId}`; +export default Component.extend( + FocusableMixin, + ColorMixin, + ChildMixin, + ValidationMixin, + { + tagName: 'md-input-container', + classNames: ['md-default-theme'], + + classNameBindings: [ + 'hasValue:md-input-has-value', + 'isInvalidAndTouched:md-input-invalid', + 'hasLeftIcon:md-icon-left', + 'hasRightIcon:md-icon-right', + 'focused:md-input-focused', + 'block:md-block', + 'placeholder:md-input-has-placeholder', + ], + + type: 'text', + autofocus: false, + tabindex: null, + hideAllMessages: false, + isTouched: false, + iconComponent: 'paper-icon', + + // override validation mixin `isInvalid` to account for the native input validity + isInvalid: or('hasErrorMessages', 'isNativeInvalid'), + + hasValue: computed('value', 'isNativeInvalid', function () { + let value = this.value; + let isNativeInvalid = this.isNativeInvalid; + return !isEmpty(value) || isNativeInvalid; + }), + + shouldAddPlaceholder: computed('label', 'focused', function () { + // if has label, only add placeholder when focused + return isEmpty(this.label) || this.focused; + }), + + inputElementId: computed('elementId', { + get() { + return `input-${this.elementId}`; + }, + // elementId can be set from outside and it will override the computed value. + // Please check the deprecations for further details + // https://deprecations.emberjs.com/v3.x/#toc_computed-property-override + set(key, value) { + // To make sure the context updates properly, We are manually set value using @ember/object#set as recommended. + return set(this, 'elementId', value); + }, + }), + + renderCharCount: computed('value', function () { + let currentLength = this.value ? this.value.length : 0; + return `${currentLength}/${this.maxlength}`; + }), + + hasLeftIcon: bool('icon'), + hasRightIcon: bool('iconRight'), + isInvalidAndTouched: and('isInvalid', 'isTouched'), + + // property that validations should be run on + validationProperty: 'value', + + // Lifecycle hooks + didReceiveAttrs() { + this._super(...arguments); + assert( + '{{paper-input}} requires an `onChange` action or null for no action.', + this.onChange !== undefined + ); + + let { value, errors } = this; + let { _prevValue, _prevErrors } = this; + if (value !== _prevValue || errors !== _prevErrors) { + this.notifyValidityChange(); + } + this._prevValue = value; + this._prevErrors = errors; }, - // elementId can be set from outside and it will override the computed value. - // Please check the deprecations for further details - // https://deprecations.emberjs.com/v3.x/#toc_computed-property-override - set(key, value) { - // To make sure the context updates properly, We are manually set value using @ember/object#set as recommended. - return set(this, "elementId", value); - } - }), - - - - renderCharCount: computed('value', function() { - let currentLength = this.value ? this.value.length : 0; - return `${currentLength}/${this.maxlength}`; - }), - - hasLeftIcon: bool('icon'), - hasRightIcon: bool('iconRight'), - isInvalidAndTouched: and('isInvalid', 'isTouched'), - - validationProperty: 'value', // property that validations should be run on - - // Lifecycle hooks - didReceiveAttrs() { - this._super(...arguments); - assert('{{paper-input}} requires an `onChange` action or null for no action.', this.onChange !== undefined); - - let { value, errors } = this; - let { _prevValue, _prevErrors } = this; - if (value !== _prevValue || errors !== _prevErrors) { - this.notifyValidityChange(); - } - this._prevValue = value; - this._prevErrors = errors; - }, - - didInsertElement() { - this._super(...arguments); - if (this.textarea) { - this._growTextareaOnResize = bind(this, this.growTextarea); - window.addEventListener('resize', this._growTextareaOnResize); - } - }, - - didRender() { - this._super(...arguments); - // setValue below ensures that the input value is the same as this.value - this.setValue(this.value); - this.growTextarea(); - }, - - willDestroyElement() { - this._super(...arguments); - if (this.textarea) { - window.removeEventListener('resize', this._growTextareaOnResize); - this._growTextareaOnResize = null; - } - }, - - growTextarea() { - if (this.textarea) { - let inputElement = this.element.querySelector('input, textarea'); - inputElement.classList.add('md-no-flex'); - inputElement.setAttribute('rows', 1); - - let minRows = this.get('passThru.rows'); - let height = this.getHeight(inputElement); - if (minRows) { - if (!this.lineHeight) { - inputElement.style.minHeight = 0; - this.lineHeight = inputElement.clientHeight; - inputElement.style.minHeight = null; - } - if (this.lineHeight) { - height = Math.max(height, this.lineHeight * minRows); - } - let proposedHeight = Math.round(height / this.lineHeight); - let maxRows = this.get('passThru.maxRows') || Number.MAX_VALUE; - let rowsToSet = Math.min(proposedHeight, maxRows); - inputElement.style.height = `${this.lineHeight * rowsToSet}px`; - inputElement.setAttribute('rows', rowsToSet); + didInsertElement() { + this._super(...arguments); + if (this.textarea) { + this._growTextareaOnResize = bind(this, this.growTextarea); + window.addEventListener('resize', this._growTextareaOnResize); + } + }, - if (proposedHeight >= maxRows) { - inputElement.classList.add('md-textarea-scrollable'); - } else { - inputElement.classList.remove('md-textarea-scrollable'); - } + didRender() { + this._super(...arguments); + // setValue below ensures that the input value is the same as this.value + this.setValue(this.value); + this.growTextarea(); + }, - } else { - inputElement.style.height = 'auto'; - inputElement.scrollTop = 0; - let height = this.getHeight(inputElement); - if (height) { - inputElement.style.height = `${height}px`; - } + willDestroyElement() { + this._super(...arguments); + if (this.textarea) { + window.removeEventListener('resize', this._growTextareaOnResize); + this._growTextareaOnResize = null; } + }, - inputElement.classList.remove('md-no-flex'); - } - }, + growTextarea() { + if (this.textarea) { + let inputElement = this.element.querySelector('input, textarea'); + inputElement.classList.add('md-no-flex'); + inputElement.setAttribute('rows', 1); - getHeight(inputElement) { - let { offsetHeight } = inputElement; - let line = inputElement.scrollHeight - offsetHeight; - return offsetHeight + (line > 0 ? line : 0); - }, + let minRows = this.get('passThru.rows'); + let height = this.getHeight(inputElement); + if (minRows) { + if (!this.lineHeight) { + inputElement.style.minHeight = 0; + this.lineHeight = inputElement.clientHeight; + inputElement.style.minHeight = null; + } + if (this.lineHeight) { + height = Math.max(height, this.lineHeight * minRows); + } + let proposedHeight = Math.round(height / this.lineHeight); + let maxRows = this.get('passThru.maxRows') || Number.MAX_VALUE; + let rowsToSet = Math.min(proposedHeight, maxRows); + + inputElement.style.height = `${this.lineHeight * rowsToSet}px`; + inputElement.setAttribute('rows', rowsToSet); + + if (proposedHeight >= maxRows) { + inputElement.classList.add('md-textarea-scrollable'); + } else { + inputElement.classList.remove('md-textarea-scrollable'); + } + } else { + inputElement.style.height = 'auto'; + inputElement.scrollTop = 0; + let height = this.getHeight(inputElement); + if (height) { + inputElement.style.height = `${height}px`; + } + } + + inputElement.classList.remove('md-no-flex'); + } + }, - setValue(value) { - // normalize falsy values to empty string - value = isEmpty(value) ? '' : value; + getHeight(inputElement) { + let { offsetHeight } = inputElement; + let line = inputElement.scrollHeight - offsetHeight; + return offsetHeight + (line > 0 ? line : 0); + }, - if (this.element.querySelector('input, textarea').value !== value) { - this.element.querySelector('input, textarea').value = value; - } - }, + setValue(value) { + // normalize falsy values to empty string + value = isEmpty(value) ? '' : value; - actions: { - handleInput(e) { - invokeAction(this, 'onChange', e.target.value); - // setValue below ensures that the input value is the same as this.value - next(() => { - if (this.isDestroyed) { - return; - } - this.setValue(this.value); - }); - this.growTextarea(); - let inputElement = this.element.querySelector('input'); - let isNativeInvalid = inputElement && inputElement.validity && inputElement.validity.badInput; - if (this.type === 'date' && e.target.value === '') { - // Chrome doesn't fire the onInput event when clearing the second and third date components. - // This means that we won't see another event when badInput becomes false if the user is clearing - // the date field. The reported value is empty, though, so we can already mark it as valid. - isNativeInvalid = false; + if (this.element.querySelector('input, textarea').value !== value) { + this.element.querySelector('input, textarea').value = value; } - this.set('isNativeInvalid', isNativeInvalid); - this.notifyValidityChange(); }, - handleBlur(e) { - invokeAction(this, 'onBlur', e); - this.set('isTouched', true); - this.notifyValidityChange(); - } + actions: { + handleInput(e) { + invokeAction(this, 'onChange', e.target.value); + // setValue below ensures that the input value is the same as this.value + next(() => { + if (this.isDestroyed) { + return; + } + this.setValue(this.value); + }); + this.growTextarea(); + let inputElement = this.element.querySelector('input'); + let isNativeInvalid = + inputElement && + inputElement.validity && + inputElement.validity.badInput; + if (this.type === 'date' && e.target.value === '') { + // Chrome doesn't fire the onInput event when clearing the second and third date components. + // This means that we won't see another event when badInput becomes false if the user is clearing + // the date field. The reported value is empty, though, so we can already mark it as valid. + isNativeInvalid = false; + } + this.set('isNativeInvalid', isNativeInvalid); + this.notifyValidityChange(); + }, + + handleBlur(e) { + invokeAction(this, 'onBlur', e); + this.set('isTouched', true); + this.notifyValidityChange(); + }, + }, } -}); +); diff --git a/addon/templates/components/paper-item.hbs b/addon/components/paper-item.hbs similarity index 100% rename from addon/templates/components/paper-item.hbs rename to addon/components/paper-item.hbs diff --git a/addon/components/paper-item.js b/addon/components/paper-item.js index 3481b2eeb..99254e445 100644 --- a/addon/components/paper-item.js +++ b/addon/components/paper-item.js @@ -1,10 +1,13 @@ -/* eslint-disable ember/no-classic-components, ember/no-computed-properties-in-native-classes, prettier/prettier */ -import { attributeBindings, classNameBindings, tagName, layout as templateLayout } from '@ember-decorators/component'; +/* eslint-disable ember/no-classic-components, ember/no-computed-properties-in-native-classes */ +import { + attributeBindings, + classNameBindings, + tagName, +} from '@ember-decorators/component'; import { computed } from '@ember/object'; import { or, bool, filter } from '@ember/object/computed'; import Component from '@ember/component'; -import layout from '../templates/components/paper-item'; import { ParentMixin } from 'ember-composability-tools'; import { invokeAction } from 'ember-paper/utils/invoke-action'; /** @@ -12,7 +15,6 @@ import { invokeAction } from 'ember-paper/utils/invoke-action'; * @extends Ember.Component * @uses ParentMixin */ -@templateLayout(layout) @tagName('md-list-item') @classNameBindings( 'hasProxiedComponent:md-proxy-focus', @@ -35,7 +37,7 @@ export default class PaperItem extends Component.extend(ParentMixin) { role = 'listitem'; tabindex = '-1'; - @filter('childComponents', function(c) { + @filter('childComponents', function (c) { return !c.get('skipProxy'); }) proxiedComponents; @@ -82,7 +84,11 @@ export default class PaperItem extends Component.extend(ParentMixin) { click() { this.proxiedComponents.forEach((component) => { - if (component.processProxy && !component.get('disabled') && (component.get('bubbles') | !this.hasPrimaryAction)) { + if ( + component.processProxy && + !component.get('disabled') && + component.get('bubbles') | !this.hasPrimaryAction + ) { component.processProxy(); } }); diff --git a/addon/templates/components/paper-optgroup.hbs b/addon/components/paper-optgroup.hbs similarity index 100% rename from addon/templates/components/paper-optgroup.hbs rename to addon/components/paper-optgroup.hbs diff --git a/addon/templates/components/paper-option.hbs b/addon/components/paper-option.hbs similarity index 100% rename from addon/templates/components/paper-option.hbs rename to addon/components/paper-option.hbs diff --git a/addon/templates/components/paper-progress-circular.hbs b/addon/components/paper-progress-circular.hbs similarity index 100% rename from addon/templates/components/paper-progress-circular.hbs rename to addon/components/paper-progress-circular.hbs diff --git a/addon/components/paper-progress-circular.js b/addon/components/paper-progress-circular.js index 1e493a561..4578c2b9f 100644 --- a/addon/components/paper-progress-circular.js +++ b/addon/components/paper-progress-circular.js @@ -1,4 +1,4 @@ -/* eslint-disable ember/no-classic-components, ember/no-component-lifecycle-hooks, ember/no-mixins, ember/require-tagless-components, prettier/prettier */ +/* eslint-disable ember/no-classic-components, ember/no-component-lifecycle-hooks, ember/no-mixins, ember/require-tagless-components */ /** * @module ember-paper */ @@ -9,7 +9,6 @@ import Component from '@ember/component'; import { computed } from '@ember/object'; import { isPresent } from '@ember/utils'; import { htmlSafe } from '@ember/string'; -import layout from '../templates/components/paper-progress-circular'; import ColorMixin from 'ember-paper/mixins/color-mixin'; import clamp from 'ember-paper/utils/clamp'; @@ -23,18 +22,22 @@ const MODE_INDETERMINATE = 'indeterminate'; */ const TICK = 17; -const rAF = !window.requestAnimationFrame ? function(fn) { - return setTimeout(fn, TICK); -} : window.requestAnimationFrame; +const rAF = !window.requestAnimationFrame + ? function (fn) { + return setTimeout(fn, TICK); + } + : window.requestAnimationFrame; -const cAF = !window. cancelAnimationFrame ? function(fn) { - return clearTimeout(fn, TICK); -} : window. cancelAnimationFrame; +const cAF = !window.cancelAnimationFrame + ? function (fn) { + return clearTimeout(fn, TICK); + } + : window.cancelAnimationFrame; const now = () => new Date().getTime(); function linearEase(t, b, c, d) { - return c * t / d + b; + return (c * t) / d + b; } function materialEase(t, b, c, d) { @@ -51,37 +54,39 @@ function materialEase(t, b, c, d) { * @uses ColorMixin */ export default Component.extend(ColorMixin, { - layout, tagName: 'md-progress-circular', classNames: ['md-default-theme'], attributeBindings: ['value', 'mode:md-mode', 'containerStyle:style'], - classNameBindings: ['spinnerClass', 'disabled:_md-progress-circular-disabled'], - + classNameBindings: [ + 'spinnerClass', + 'disabled:_md-progress-circular-disabled', + ], diameter: 50, strokeRatio: 0.1, - durationIndeterminate: 1333, easeFnIndeterminate: materialEase, startIndeterminate: 1, endIndeterminate: 149, - mode: computed('value', function() { + mode: computed('value', function () { let value = this.value; return isPresent(value) ? MODE_DETERMINATE : MODE_INDETERMINATE; }), - spinnerClass: computed('mode', function() { + spinnerClass: computed('mode', function () { let mode = this.mode; - return mode === MODE_DETERMINATE || mode === MODE_INDETERMINATE ? `md-mode-${mode}` : 'ng-hide'; + return mode === MODE_DETERMINATE || mode === MODE_INDETERMINATE + ? `md-mode-${mode}` + : 'ng-hide'; }), isIndeterminate: equal('mode', MODE_INDETERMINATE).readOnly(), - strokeWidth: computed('strokeRatio', 'diameter', function() { + strokeWidth: computed('strokeRatio', 'diameter', function () { return this.strokeRatio * this.diameter; }), - strokeDasharray: computed('mode', 'diameter', 'strokeWidth', function() { + strokeDasharray: computed('mode', 'diameter', 'strokeWidth', function () { if (this.mode === MODE_INDETERMINATE) { return (this.diameter - this.strokeWidth) * Math.PI * 0.75; } else { @@ -89,30 +94,36 @@ export default Component.extend(ColorMixin, { } }), - d: computed('diameter', 'strokeWidth', 'isIndeterminate', function() { - return this.getSvgArc(this.diameter, this.strokeWidth, this.isIndeterminate); + d: computed('diameter', 'strokeWidth', 'isIndeterminate', function () { + return this.getSvgArc( + this.diameter, + this.strokeWidth, + this.isIndeterminate + ); }), - pathDiameter: computed('diameter', 'strokeWidth', function() { + pathDiameter: computed('diameter', 'strokeWidth', function () { return this.diameter - this.strokeWidth; }), - containerStyle: computed('diameter', function() { + containerStyle: computed('diameter', function () { let diameter = this.diameter; let width = `width: ${diameter}px`; let height = `height: ${diameter}px`; return htmlSafe([width, height].join('; ')); }), - svgStyle: computed('diameter', function() { + svgStyle: computed('diameter', function () { let diameter = this.diameter; let width = `width: ${diameter}px`; let height = `height: ${diameter}px`; - let transformOrigin = `transform-origin: ${diameter / 2}px ${diameter / 2}px ${diameter / 2}px`; + let transformOrigin = `transform-origin: ${diameter / 2}px ${ + diameter / 2 + }px ${diameter / 2}px`; return htmlSafe([width, height, transformOrigin].join('; ')); }), - pathStyle: computed('strokeWidth', function() { + pathStyle: computed('strokeWidth', function () { return htmlSafe(`stroke-width: ${this.strokeWidth}px`); }), @@ -164,9 +175,16 @@ export default Component.extend(ColorMixin, { }, iterationCount: 0, + startIndeterminateAnimation() { - this.renderCircle(this.startIndeterminate, this.endIndeterminate, - this.easeFnIndeterminate, this.durationIndeterminate, this.iterationCount, 75); + this.renderCircle( + this.startIndeterminate, + this.endIndeterminate, + this.easeFnIndeterminate, + this.durationIndeterminate, + this.iterationCount, + 75 + ); // The % 4 technically isn't necessary, but it keeps the rotation // under 360, instead of becoming a crazy large number. @@ -174,8 +192,20 @@ export default Component.extend(ColorMixin, { }, lastAnimationId: 0, - renderCircle(animateFrom, animateTo, ease = linearEase, animationDuration = 100, iterationCount = 0, dashLimit = 100) { - if (this.isDestroyed || this.isDestroying || typeof FastBoot !== 'undefined') { + + renderCircle( + animateFrom, + animateTo, + ease = linearEase, + animationDuration = 100, + iterationCount = 0, + dashLimit = 100 + ) { + if ( + this.isDestroyed || + this.isDestroying || + typeof FastBoot !== 'undefined' + ) { return; } @@ -188,14 +218,18 @@ export default Component.extend(ColorMixin, { let renderFrame = (value, diameter, strokeWidth, dashLimit) => { if (!this.isDestroyed && !this.isDestroying && this.element) { - let path = this.element.querySelector('path'); if (!path) { return; } - path.setAttribute('stroke-dashoffset', this.getDashLength(diameter, strokeWidth, value, dashLimit)); - path.setAttribute('transform', `rotate(${rotation} ${diameter / 2} ${diameter / 2})`); - + path.setAttribute( + 'stroke-dashoffset', + this.getDashLength(diameter, strokeWidth, value, dashLimit) + ); + path.setAttribute( + 'transform', + `rotate(${rotation} ${diameter / 2} ${diameter / 2})` + ); } }; @@ -205,14 +239,22 @@ export default Component.extend(ColorMixin, { } else { let animation = () => { let currentTime = clamp(now() - startTime, 0, animationDuration); - renderFrame(ease(currentTime, animateFrom, changeInValue, animationDuration), diameter, strokeWidth, dashLimit); + renderFrame( + ease(currentTime, animateFrom, changeInValue, animationDuration), + diameter, + strokeWidth, + dashLimit + ); // Do not allow overlapping animations if (id === this.lastAnimationId && currentTime < animationDuration) { this.lastDrawFrame = rAF(animation); } - if (currentTime >= animationDuration && this.mode === MODE_INDETERMINATE) { + if ( + currentTime >= animationDuration && + this.mode === MODE_INDETERMINATE + ) { this.startIndeterminateAnimation(); } }; @@ -234,12 +276,22 @@ export default Component.extend(ColorMixin, { let radius = diameter / 2; let offset = strokeWidth / 2; let start = `${radius},${offset}`; // ie: (25, 2.5) or 12 o'clock - let end = `${offset},${radius}`; // ie: (2.5, 25) or 9 o'clock + let end = `${offset},${radius}`; // ie: (2.5, 25) or 9 o'clock let arcRadius = radius - offset; - return 'M' + start - + 'A' + arcRadius + ',' + arcRadius + ' 0 1 1 ' + end // 75% circle - + (indeterminate ? '' : 'A' + arcRadius + ',' + arcRadius + ' 0 0 1 ' + start); // loop to start + return ( + 'M' + + start + + 'A' + + arcRadius + + ',' + + arcRadius + + ' 0 1 1 ' + + end + // 75% circle + (indeterminate + ? '' + : 'A' + arcRadius + ',' + arcRadius + ' 0 0 1 ' + start) + ); // loop to start }, /** @@ -253,6 +305,10 @@ export default Component.extend(ColorMixin, { * @returns {number} Stroke length for progres circle */ getDashLength(diameter, strokeWidth, value, limit) { - return (diameter - strokeWidth) * Math.PI * ((3 * (limit || 100) / 100) - (value / 100)); - } + return ( + (diameter - strokeWidth) * + Math.PI * + ((3 * (limit || 100)) / 100 - value / 100) + ); + }, }); diff --git a/addon/templates/components/paper-progress-linear.hbs b/addon/components/paper-progress-linear.hbs similarity index 100% rename from addon/templates/components/paper-progress-linear.hbs rename to addon/components/paper-progress-linear.hbs diff --git a/addon/components/paper-progress-linear.js b/addon/components/paper-progress-linear.js index a585fdf14..655db843c 100644 --- a/addon/components/paper-progress-linear.js +++ b/addon/components/paper-progress-linear.js @@ -1,4 +1,4 @@ -/* eslint-disable ember/no-classic-components, ember/no-get, ember/no-mixins, ember/require-computed-property-dependencies, ember/require-tagless-components, prettier/prettier */ +/* eslint-disable ember/no-classic-components, ember/no-get, ember/no-mixins, ember/require-computed-property-dependencies, ember/require-tagless-components */ /** * @module ember-paper */ @@ -8,7 +8,6 @@ import { computed } from '@ember/object'; import Component from '@ember/component'; import { isPresent } from '@ember/utils'; import { htmlSafe } from '@ember/string'; -import layout from '../templates/components/paper-progress-linear'; import ColorMixin from 'ember-paper/mixins/color-mixin'; function makeTransform(value) { @@ -28,12 +27,9 @@ const MODE_QUERY = 'query'; * @uses ColorMixin */ export default Component.extend(ColorMixin, { - layout, tagName: 'md-progress-linear', - attributeBindings: ['mode:md-mode', 'bufferValue:md-buffer-value'], classNames: ['md-default-theme'], - constants: service(), mode: computed('value', { @@ -56,39 +52,50 @@ export default Component.extend(ColorMixin, { } }, set(key, value) { - return this._mode = value; - } + return (this._mode = value); + }, }), - queryModeClass: computed('mode', function() { + queryModeClass: computed('mode', function () { let mode = this.mode; - if ([MODE_QUERY, MODE_BUFFER, MODE_DETERMINATE, MODE_INDETERMINATE].includes(mode)) { + if ( + [MODE_QUERY, MODE_BUFFER, MODE_DETERMINATE, MODE_INDETERMINATE].includes( + mode + ) + ) { return `md-mode-${mode}`; } else { return ''; } }), - bar1Style: computed('clampedBufferValue', function() { - return htmlSafe(`${this.get('constants.CSS.TRANSFORM')}: ${makeTransform(this.clampedBufferValue)}`); + bar1Style: computed('clampedBufferValue', function () { + return htmlSafe( + `${this.get('constants.CSS.TRANSFORM')}: ${makeTransform( + this.clampedBufferValue + )}` + ); }), - bar2Style: computed('clampedValue', 'mode', function() { + bar2Style: computed('clampedValue', 'mode', function () { if (this.mode === MODE_QUERY) { return htmlSafe(''); } - return htmlSafe(`${this.get('constants.CSS.TRANSFORM')}: ${makeTransform(this.clampedValue)}`); + return htmlSafe( + `${this.get('constants.CSS.TRANSFORM')}: ${makeTransform( + this.clampedValue + )}` + ); }), - clampedValue: computed('value', function() { + clampedValue: computed('value', function () { let value = this.value; return Math.max(0, Math.min(value || 0, 100)); }), - clampedBufferValue: computed('bufferValue', function() { + clampedBufferValue: computed('bufferValue', function () { let value = this.bufferValue; return Math.max(0, Math.min(value || 0, 100)); - }) - + }), }); diff --git a/addon/templates/components/paper-radio-base.hbs b/addon/components/paper-radio-base.hbs similarity index 100% rename from addon/templates/components/paper-radio-base.hbs rename to addon/components/paper-radio-base.hbs diff --git a/addon/components/paper-radio-base.js b/addon/components/paper-radio-base.js index 6fbdf324b..f27e928d4 100644 --- a/addon/components/paper-radio-base.js +++ b/addon/components/paper-radio-base.js @@ -1,4 +1,4 @@ -/* eslint-disable ember/no-classic-components, ember/no-mixins, ember/require-tagless-components, prettier/prettier */ +/* eslint-disable ember/no-classic-components, ember/no-mixins, ember/require-tagless-components */ /** * @module ember-paper */ @@ -6,7 +6,6 @@ import Component from '@ember/component'; import { computed } from '@ember/object'; import { assert } from '@ember/debug'; -import layout from '../templates/components/paper-radio-base'; import FocusableMixin from 'ember-paper/mixins/focusable-mixin'; import ColorMixin from 'ember-paper/mixins/color-mixin'; import { invokeAction } from 'ember-paper/utils/invoke-action'; @@ -18,18 +17,17 @@ import { invokeAction } from 'ember-paper/utils/invoke-action'; * @uses ColorMixin */ export default Component.extend(FocusableMixin, ColorMixin, { - layout, tagName: 'md-radio-button', classNames: ['md-default-theme'], classNameBindings: ['checked:md-checked'], + attributeBindings: [ 'role', 'ariaChecked:aria-checked', - 'ariaLabel:aria-label' + 'ariaLabel:aria-label', ], tabindex: null, - toggle: false, role: 'radio', @@ -38,19 +36,22 @@ export default Component.extend(FocusableMixin, ColorMixin, { // Lifecycle hooks init() { - assert('{{paper-radio}} requires an `onChange` action or null for no action.', this.onChange !== undefined); + assert( + '{{paper-radio}} requires an `onChange` action or null for no action.', + this.onChange !== undefined + ); this._super(...arguments); }, - checked: computed('groupValue', 'value', function() { + checked: computed('groupValue', 'value', function () { return this.groupValue === this.value; }), - ariaChecked: computed('checked', function() { + ariaChecked: computed('checked', function () { return this.checked ? 'true' : 'false'; }), - labelId: computed('elementId', function() { + labelId: computed('elementId', function () { return `${this.elementId}-label`; }), @@ -64,5 +65,5 @@ export default Component.extend(FocusableMixin, ColorMixin, { } // Prevent bubbling, if specified. If undefined, the event will bubble. return this.bubbles; - } + }, }); diff --git a/addon/templates/components/paper-radio-group-label.hbs b/addon/components/paper-radio-group-label.hbs similarity index 100% rename from addon/templates/components/paper-radio-group-label.hbs rename to addon/components/paper-radio-group-label.hbs diff --git a/addon/components/paper-radio-group-label.js b/addon/components/paper-radio-group-label.js index 2d15a5f7e..fe9ab13e1 100644 --- a/addon/components/paper-radio-group-label.js +++ b/addon/components/paper-radio-group-label.js @@ -1,10 +1,7 @@ -/* eslint-disable ember/no-classic-components, ember/no-component-lifecycle-hooks, ember/require-tagless-components, prettier/prettier */ +/* eslint-disable ember/no-classic-components, ember/no-component-lifecycle-hooks, ember/require-tagless-components */ import Component from '@ember/component'; -import layout from '../templates/components/paper-radio-group-label'; export default Component.extend({ - layout, - tagName: 'md-label', didInsertElement() { @@ -13,5 +10,5 @@ export default Component.extend({ if (this.setAriaLabelledby) { this.setAriaLabelledby(this.elementId); } - } + }, }); diff --git a/addon/templates/components/paper-radio-group.hbs b/addon/components/paper-radio-group.hbs similarity index 100% rename from addon/templates/components/paper-radio-group.hbs rename to addon/components/paper-radio-group.hbs diff --git a/addon/components/paper-radio-group.js b/addon/components/paper-radio-group.js index 00b39aee7..0f61abf9b 100644 --- a/addon/components/paper-radio-group.js +++ b/addon/components/paper-radio-group.js @@ -1,4 +1,4 @@ -/* eslint-disable ember/no-actions-hash, ember/no-classic-components, ember/no-get, ember/no-mixins, ember/require-tagless-components, prettier/prettier */ +/* eslint-disable ember/no-actions-hash, ember/no-classic-components, ember/no-get, ember/no-mixins, ember/require-tagless-components */ /** * @module ember-paper */ @@ -7,7 +7,6 @@ import { inject as service } from '@ember/service'; import { filterBy, mapBy, notEmpty } from '@ember/object/computed'; import Component from '@ember/component'; import { assert } from '@ember/debug'; -import layout from '../templates/components/paper-radio-group'; import FocusableMixin from 'ember-paper/mixins/focusable-mixin'; import { ParentMixin } from 'ember-composability-tools'; import { isPresent } from '@ember/utils'; @@ -20,7 +19,6 @@ import { invokeAction } from 'ember-paper/utils/invoke-action'; * @uses ParentMixin */ export default Component.extend(FocusableMixin, ParentMixin, { - layout, tagName: 'md-radio-group', tabindex: 0, @@ -30,26 +28,24 @@ export default Component.extend(FocusableMixin, ParentMixin, { radioComponent: 'paper-radio', labelComponent: 'paper-radio-group-label', role: 'radiogroup', - constants: service(), // Lifecycle hooks init() { this._super(...arguments); - assert('{{paper-radio-group}} requires an `onChange` action or null for no action', this.onChange !== undefined); + assert( + '{{paper-radio-group}} requires an `onChange` action or null for no action', + this.onChange !== undefined + ); }, - attributeBindings: [ - 'role', - 'ariaLabelledby:aria-labelledby' - ], + attributeBindings: ['role', 'ariaLabelledby:aria-labelledby'], enabledChildRadios: filterBy('childComponents', 'disabled', false), childValues: mapBy('enabledChildRadios', 'value'), hasLabel: notEmpty('labelNode'), keyDown(ev) { - switch (ev.which) { case this.get('constants.KEYCODE.LEFT_ARROW'): case this.get('constants.KEYCODE.UP_ARROW'): @@ -83,6 +79,6 @@ export default Component.extend(FocusableMixin, ParentMixin, { actions: { onChange(value) { invokeAction(this, 'onChange', value); - } - } + }, + }, }); diff --git a/addon/templates/components/paper-reset-button.hbs b/addon/components/paper-reset-button.hbs similarity index 100% rename from addon/templates/components/paper-reset-button.hbs rename to addon/components/paper-reset-button.hbs diff --git a/addon/components/paper-reset-button.js b/addon/components/paper-reset-button.js index b05b3ff08..efa3e718a 100644 --- a/addon/components/paper-reset-button.js +++ b/addon/components/paper-reset-button.js @@ -1,12 +1,12 @@ -/* eslint-disable ember/no-classic-components, prettier/prettier */ +/* eslint-disable ember/no-classic-components */ import Component from '@ember/component'; -import layout from '../templates/components/paper-reset-button'; export default Component.extend({ tagName: '', - layout, handleClick(onReset, e) { - if (onReset) { onReset(e) } - } + if (onReset) { + onReset(e); + } + }, }); diff --git a/addon/templates/components/paper-sidenav-inner.hbs b/addon/components/paper-sidenav-inner.hbs similarity index 100% rename from addon/templates/components/paper-sidenav-inner.hbs rename to addon/components/paper-sidenav-inner.hbs diff --git a/addon/components/paper-sidenav-inner.js b/addon/components/paper-sidenav-inner.js index 6e6bed290..0d264b96b 100644 --- a/addon/components/paper-sidenav-inner.js +++ b/addon/components/paper-sidenav-inner.js @@ -1,11 +1,10 @@ -/* eslint-disable ember/no-classic-components, ember/no-component-lifecycle-hooks, prettier/prettier */ +/* eslint-disable ember/no-classic-components, ember/no-component-lifecycle-hooks */ /** * @module ember-paper */ /* globals FastBoot */ import { inject as service } from '@ember/service'; import Component from '@ember/component'; -import layout from '../templates/components/paper-sidenav-inner'; import { computed } from '@ember/object'; import { bind } from '@ember/runloop'; import { invokeAction } from 'ember-paper/utils/invoke-action'; @@ -17,11 +16,8 @@ import { invokeAction } from 'ember-paper/utils/invoke-action'; */ export default Component.extend({ tagName: '', - layout, - constants: service(), paperSidenav: service(), - name: 'default', position: 'left', lockedOpen: 'gt-sm', @@ -29,7 +25,7 @@ export default Component.extend({ closeOnClick: true, tabindex: -1, - positionClass: computed('position', function() { + positionClass: computed('position', function () { return `md-sidenav-${this.position}`; }), @@ -65,7 +61,6 @@ export default Component.extend({ }, updateLockedOpen() { - let lockedOpen = this.lockedOpen; let isLockedOpen; @@ -113,5 +108,5 @@ export default Component.extend({ if (!this.isLockedOpen) { invokeAction(this, 'onToggle', this.closed); } - } + }, }); diff --git a/addon/templates/components/paper-sidenav-toggle.hbs b/addon/components/paper-sidenav-toggle.hbs similarity index 100% rename from addon/templates/components/paper-sidenav-toggle.hbs rename to addon/components/paper-sidenav-toggle.hbs diff --git a/addon/components/paper-sidenav-toggle.js b/addon/components/paper-sidenav-toggle.js index 204466bcc..1f83afe55 100644 --- a/addon/components/paper-sidenav-toggle.js +++ b/addon/components/paper-sidenav-toggle.js @@ -1,26 +1,21 @@ -/* eslint-disable ember/no-classic-components, prettier/prettier */ +/* eslint-disable ember/no-classic-components */ /** * @module ember-paper */ import { inject as service } from '@ember/service'; import Component from '@ember/component'; -import layout from '../templates/components/paper-sidenav-toggle'; /** * @class PaperSidenavToggle * @extends Ember.Component */ export default Component.extend({ - layout, tagName: '', - name: 'default', - paperSidenav: service(), toggle() { this.paperSidenav.toggle(this.name); - } - + }, }); diff --git a/addon/templates/components/paper-sidenav.hbs b/addon/components/paper-sidenav.hbs similarity index 100% rename from addon/templates/components/paper-sidenav.hbs rename to addon/components/paper-sidenav.hbs diff --git a/addon/components/paper-sidenav.js b/addon/components/paper-sidenav.js index 986cf9808..42e3d202f 100644 --- a/addon/components/paper-sidenav.js +++ b/addon/components/paper-sidenav.js @@ -1,11 +1,10 @@ -/* eslint-disable ember/no-actions-hash, ember/no-classic-components, prettier/prettier */ +/* eslint-disable ember/no-actions-hash, ember/no-classic-components */ /** * @module ember-paper */ import { not } from '@ember/object/computed'; import Component from '@ember/component'; -import layout from '../templates/components/paper-sidenav'; import { invokeAction } from 'ember-paper/utils/invoke-action'; /** @@ -13,9 +12,7 @@ import { invokeAction } from 'ember-paper/utils/invoke-action'; * @extends Ember.Component */ export default Component.extend({ - layout, tagName: '', - name: 'default', position: 'left', lockedOpen: 'gt-sm', @@ -29,6 +26,6 @@ export default Component.extend({ }, onBackdropTap() { invokeAction(this, 'onToggle', false); - } - } + }, + }, }); diff --git a/addon/templates/components/paper-speed-dial-actions.hbs b/addon/components/paper-speed-dial-actions.hbs similarity index 100% rename from addon/templates/components/paper-speed-dial-actions.hbs rename to addon/components/paper-speed-dial-actions.hbs diff --git a/addon/components/paper-speed-dial-actions.js b/addon/components/paper-speed-dial-actions.js index 2c3794f44..340a498c5 100644 --- a/addon/components/paper-speed-dial-actions.js +++ b/addon/components/paper-speed-dial-actions.js @@ -1,8 +1,6 @@ -/* eslint-disable ember/no-classic-components, ember/require-tagless-components, prettier/prettier */ +/* eslint-disable ember/no-classic-components, ember/require-tagless-components */ import Component from '@ember/component'; -import layout from '../templates/components/paper-speed-dial-actions'; export default Component.extend({ - layout, - tagName: 'md-fab-actions' + tagName: 'md-fab-actions', }); diff --git a/addon/templates/components/paper-speed-dial.hbs b/addon/components/paper-speed-dial.hbs similarity index 100% rename from addon/templates/components/paper-speed-dial.hbs rename to addon/components/paper-speed-dial.hbs diff --git a/addon/components/paper-speed-dial.js b/addon/components/paper-speed-dial.js index a3f177724..c0291654c 100644 --- a/addon/components/paper-speed-dial.js +++ b/addon/components/paper-speed-dial.js @@ -1,32 +1,34 @@ -/* eslint-disable ember/no-classic-components, ember/no-component-lifecycle-hooks, ember/require-tagless-components, prettier/prettier */ +/* eslint-disable ember/no-classic-components, ember/no-component-lifecycle-hooks, ember/require-tagless-components */ import Component from '@ember/component'; import { computed } from '@ember/object'; import { next } from '@ember/runloop'; -import layout from '../templates/components/paper-speed-dial'; import { invokeAction } from 'ember-paper/utils/invoke-action'; export default Component.extend({ - layout, tagName: 'md-fab-speed-dial', classNameBindings: [ - 'directionClass', 'open:md-is-open', 'animationClass', - 'shouldHideActions:md-animations-waiting', 'hoverFull:md-hover-full' + 'directionClass', + 'open:md-is-open', + 'animationClass', + 'shouldHideActions:md-animations-waiting', + 'hoverFull:md-hover-full', ], open: false, - animation: 'fling', - animationClass: computed('animation', function() { + + animationClass: computed('animation', function () { return `md-${this.animation}`; }), direction: 'down', - directionClass: computed('direction', function() { + + directionClass: computed('direction', function () { return `md-${this.direction}`; }), - shouldHideActions: computed('animation', 'elementDidRender', function() { + shouldHideActions: computed('animation', 'elementDidRender', function () { return this.animation === 'fling' && !this.elementDidRender; }), @@ -85,5 +87,5 @@ export default Component.extend({ } else { this.set('open', value); } - } + }, }); diff --git a/addon/templates/components/paper-subheader.hbs b/addon/components/paper-subheader.hbs similarity index 100% rename from addon/templates/components/paper-subheader.hbs rename to addon/components/paper-subheader.hbs diff --git a/addon/components/paper-subheader.js b/addon/components/paper-subheader.js index 997b5261f..1ce499dc8 100644 --- a/addon/components/paper-subheader.js +++ b/addon/components/paper-subheader.js @@ -1,17 +1,14 @@ -/* eslint-disable ember/no-classic-components, ember/require-tagless-components, prettier/prettier */ +/* eslint-disable ember/no-classic-components, ember/require-tagless-components */ /** * @module ember-paper */ import Component from '@ember/component'; -import layout from '../templates/components/paper-subheader'; - /** * @class PaperSubheader * @extends Ember.Component */ export default Component.extend({ - layout, tagName: 'h2', - classNames: ['md-subheader'] + classNames: ['md-subheader'], }); diff --git a/addon/templates/components/paper-switch.hbs b/addon/components/paper-switch.hbs similarity index 100% rename from addon/templates/components/paper-switch.hbs rename to addon/components/paper-switch.hbs diff --git a/addon/components/paper-switch.js b/addon/components/paper-switch.js index bda67e5ad..0226d831f 100644 --- a/addon/components/paper-switch.js +++ b/addon/components/paper-switch.js @@ -1,4 +1,4 @@ -/* eslint-disable ember/no-classic-components, ember/no-component-lifecycle-hooks, ember/no-get, ember/no-mixins, ember/require-tagless-components, no-unused-vars, prettier/prettier */ +/* eslint-disable ember/no-classic-components, ember/no-component-lifecycle-hooks, ember/no-get, ember/no-mixins, ember/require-tagless-components, no-unused-vars */ /** * @module ember-paper */ @@ -9,7 +9,6 @@ import { assert } from '@ember/debug'; import { get, computed } from '@ember/object'; import { bind } from '@ember/runloop'; import { htmlSafe } from '@ember/string'; -import layout from '../templates/components/paper-switch'; import FocusableMixin from 'ember-paper/mixins/focusable-mixin'; import ColorMixin from 'ember-paper/mixins/color-mixin'; import ProxiableMixin from 'ember-paper/mixins/proxiable-mixin'; @@ -25,25 +24,25 @@ import { invokeAction } from 'ember-paper/utils/invoke-action'; * @uses ProxiableMixin */ export default Component.extend(FocusableMixin, ColorMixin, ProxiableMixin, { - layout, tagName: 'md-switch', classNames: ['paper-switch', 'md-default-theme'], classNameBindings: ['value:md-checked', 'dragging:md-dragging'], toggle: true, constants: service(), - value: false, disabled: false, dragging: false, - thumbContainerStyle: computed('dragging', 'dragAmount', function() { + thumbContainerStyle: computed('dragging', 'dragAmount', function () { if (!this.dragging) { return htmlSafe(''); } let translate = Math.max(0, Math.min(100, this.dragAmount * 100)); let transformProp = `translate3d(${translate}%, 0, 0)`; - return htmlSafe(`transform: ${transformProp};-webkit-transform: ${transformProp}`); + return htmlSafe( + `transform: ${transformProp};-webkit-transform: ${transformProp}` + ); }), didInsertElement() { @@ -57,7 +56,10 @@ export default Component.extend(FocusableMixin, ColorMixin, ProxiableMixin, { init() { this._super(...arguments); - assert('{{paper-switch}} requires an `onChange` action or null for no action.', this.onChange !== undefined); + assert( + '{{paper-switch}} requires an `onChange` action or null for no action.', + this.onChange !== undefined + ); }, willDestroyElement() { @@ -78,7 +80,10 @@ export default Component.extend(FocusableMixin, ColorMixin, ProxiableMixin, { }, _setupSwitch() { - this.set('switchWidth', this.element.querySelector('.md-thumb-container').offsetWidth); + this.set( + 'switchWidth', + this.element.querySelector('.md-thumb-container').offsetWidth + ); let switchContainer = this.element.querySelector('.md-container'); let switchHammer = new Hammer(switchContainer); @@ -86,7 +91,8 @@ export default Component.extend(FocusableMixin, ColorMixin, ProxiableMixin, { // Enable dragging the switch container switchHammer.get('pan').set({ threshold: 1 }); - switchHammer.on('panstart', bind(this, this._dragStart)) + switchHammer + .on('panstart', bind(this, this._dragStart)) .on('panmove', bind(this, this._drag)) .on('panend', bind(this, this._dragEnd)); @@ -96,9 +102,9 @@ export default Component.extend(FocusableMixin, ColorMixin, ProxiableMixin, { this._onClickHandleNativeClick = bind(this, this._handleNativeClick); - this.element.querySelector('.md-container') + this.element + .querySelector('.md-container') .addEventListener('click', this._onClickHandleNativeClick); - }, _handleNativeClick(ev) { @@ -116,7 +122,8 @@ export default Component.extend(FocusableMixin, ColorMixin, ProxiableMixin, { this._switchContainerHammer.destroy(); this._switchHammer.destroy(); } - this.element.querySelector('.md-container') + this.element + .querySelector('.md-container') .removeEventListener('click', this._onClickHandleNativeClick); this._onClickHandleNativeClick = null; }, @@ -138,7 +145,11 @@ export default Component.extend(FocusableMixin, ColorMixin, ProxiableMixin, { let value = this.value; let dragAmount = this.dragAmount; - if (!this.dragging || (value && dragAmount < 0.5) || (!value && dragAmount > 0.5)) { + if ( + !this.dragging || + (value && dragAmount < 0.5) || + (!value && dragAmount > 0.5) + ) { invokeAction(this, 'onChange', !value); } this.set('dragging', false); @@ -154,7 +165,10 @@ export default Component.extend(FocusableMixin, ColorMixin, ProxiableMixin, { }, keyPress(ev) { - if (ev.which === this.get('constants.KEYCODE.SPACE') || ev.which === this.get('constants.KEYCODE.ENTER')) { + if ( + ev.which === this.get('constants.KEYCODE.SPACE') || + ev.which === this.get('constants.KEYCODE.ENTER') + ) { ev.preventDefault(); this._dragEnd(); } @@ -162,6 +176,5 @@ export default Component.extend(FocusableMixin, ColorMixin, ProxiableMixin, { processProxy() { invokeAction(this, 'onChange', !this.value); - } - + }, }); diff --git a/addon/templates/components/paper-tab.hbs b/addon/components/paper-tab.hbs similarity index 100% rename from addon/templates/components/paper-tab.hbs rename to addon/components/paper-tab.hbs diff --git a/addon/components/paper-tab.js b/addon/components/paper-tab.js index 435476f02..4bc89b80a 100644 --- a/addon/components/paper-tab.js +++ b/addon/components/paper-tab.js @@ -1,26 +1,26 @@ -/* eslint-disable ember/classic-decorator-hooks, ember/classic-decorator-no-classic-methods, ember/no-classic-components, ember/no-computed-properties-in-native-classes, ember/no-mixins, prettier/prettier */ +/* eslint-disable ember/classic-decorator-hooks, ember/classic-decorator-no-classic-methods, ember/no-classic-components, ember/no-computed-properties-in-native-classes, ember/no-mixins */ import { classNames, attributeBindings, classNameBindings, tagName, - layout as templateLayout, } from '@ember-decorators/component'; import { computed } from '@ember/object'; import Component from '@ember/component'; import { htmlSafe } from '@ember/string'; -import layout from '../templates/components/paper-tab'; import { ChildMixin } from 'ember-composability-tools'; import FocusableMixin from 'ember-paper/mixins/focusable-mixin'; import { invokeAction } from 'ember-paper/utils/invoke-action'; -@templateLayout(layout) @tagName('md-tab-item') @classNames('md-tab') @classNameBindings('isSelected:md-active') @attributeBindings('isSelected:aria-selected', 'style', 'maybeHref:href') -export default class PaperTab extends Component.extend(ChildMixin, FocusableMixin) { +export default class PaperTab extends Component.extend( + ChildMixin, + FocusableMixin +) { // tags have browser styles or are usually styled by the user // this makes sure that tab item still looks good with an anchor tag @computed('href') @@ -59,7 +59,7 @@ export default class PaperTab extends Component.extend(ChildMixin, FocusableMixi // it is used to calculate the ink bar position & pagination offset this.setProperties({ left: this.element.offsetLeft, - width: this.element.offsetWidth + width: this.element.offsetWidth, }); } diff --git a/addon/templates/components/paper-tabs.hbs b/addon/components/paper-tabs.hbs similarity index 100% rename from addon/templates/components/paper-tabs.hbs rename to addon/components/paper-tabs.hbs diff --git a/addon/components/paper-tabs.js b/addon/components/paper-tabs.js index e6f7e601c..f194f2341 100644 --- a/addon/components/paper-tabs.js +++ b/addon/components/paper-tabs.js @@ -1,21 +1,26 @@ -/* eslint-disable ember/classic-decorator-no-classic-methods, ember/no-classic-components, ember/no-computed-properties-in-native-classes, ember/no-get, ember/no-mixins, prettier/prettier */ -import { classNames, attributeBindings, tagName, layout as templateLayout } from '@ember-decorators/component'; +/* eslint-disable ember/classic-decorator-no-classic-methods, ember/no-classic-components, ember/no-computed-properties-in-native-classes, ember/no-get, ember/no-mixins */ +import { + classNames, + attributeBindings, + tagName, +} from '@ember-decorators/component'; import { action, computed } from '@ember/object'; import { inject as service } from '@ember/service'; import { gt } from '@ember/object/computed'; import Component from '@ember/component'; import { htmlSafe } from '@ember/string'; import { scheduleOnce, join } from '@ember/runloop'; -import layout from '../templates/components/paper-tabs'; import { ParentMixin } from 'ember-composability-tools'; import ColorMixin from 'ember-paper/mixins/color-mixin'; import { invokeAction } from 'ember-paper/utils/invoke-action'; -@templateLayout(layout) @tagName('md-tabs') @classNames('md-no-tab-content', 'md-default-theme') @attributeBindings('borderBottom:md-border-bottom') -export default class PaperTabs extends Component.extend(ParentMixin, ColorMixin) { +export default class PaperTabs extends Component.extend( + ParentMixin, + ColorMixin +) { @service constants; @@ -39,13 +44,16 @@ export default class PaperTabs extends Component.extend(ParentMixin, ColorMixin) return { left: selectedTab.get('left'), - right: this.wrapperWidth - selectedTab.get('left') - selectedTab.get('width') + right: + this.wrapperWidth - selectedTab.get('left') - selectedTab.get('width'), }; } @computed('currentOffset') get paginationStyle() { - return htmlSafe(`transform: translate3d(-${this.currentOffset}px, 0px, 0px);`); + return htmlSafe( + `transform: translate3d(-${this.currentOffset}px, 0px, 0px);` + ); } shouldPaginate = true; @@ -99,7 +107,12 @@ export default class PaperTabs extends Component.extend(ParentMixin, ColorMixin) return; } - this.set('movingRight', !selectedTab || !previousSelectedTab || previousSelectedTab.get('left') < selectedTab.get('left')); + this.set( + 'movingRight', + !selectedTab || + !previousSelectedTab || + previousSelectedTab.get('left') < selectedTab.get('left') + ); this.set('_selectedTab', selectedTab); scheduleOnce('afterRender', this, this.fixOffsetIfNeeded); @@ -154,7 +167,9 @@ export default class PaperTabs extends Component.extend(ParentMixin, ColorMixin) updateDimensions() { let canvasWidth = this.element.querySelector('md-tabs-canvas').offsetWidth; - let wrapperWidth = this.element.querySelector('md-pagination-wrapper').offsetWidth; + let wrapperWidth = this.element.querySelector( + 'md-pagination-wrapper' + ).offsetWidth; this.childComponents.invoke('updateDimensions'); this.set('canvasWidth', canvasWidth); this.set('wrapperWidth', wrapperWidth); @@ -191,7 +206,7 @@ export default class PaperTabs extends Component.extend(ParentMixin, ColorMixin) previousPage() { let tab = this.childComponents.find((t) => { // ensure we are no stuck because of a tab with a width > canvasWidth - return (t.get('left') + t.get('width')) >= this.currentOffset; + return t.get('left') + t.get('width') >= this.currentOffset; }); if (tab) { let left = Math.max(0, tab.get('left') - this.canvasWidth); @@ -204,9 +219,11 @@ export default class PaperTabs extends Component.extend(ParentMixin, ColorMixin) let tab = this.childComponents.find((t) => { // ensure tab's offset is greater than current // otherwise if the tab's width is greater than canvas we cannot paginate through it - return t.get('left') > this.currentOffset + return ( + t.get('left') > this.currentOffset && // paginate until the first partially hidden tab - && t.get('left') + t.get('width') - this.currentOffset > this.canvasWidth; + t.get('left') + t.get('width') - this.currentOffset > this.canvasWidth + ); }); if (tab) { this.set('currentOffset', tab.get('left')); diff --git a/addon/templates/components/paper-toast-inner.hbs b/addon/components/paper-toast-inner.hbs similarity index 100% rename from addon/templates/components/paper-toast-inner.hbs rename to addon/components/paper-toast-inner.hbs diff --git a/addon/components/paper-toast-inner.js b/addon/components/paper-toast-inner.js index 571e2dfca..7d4615b4e 100644 --- a/addon/components/paper-toast-inner.js +++ b/addon/components/paper-toast-inner.js @@ -1,15 +1,13 @@ -/* eslint-disable ember/no-classic-components, prettier/prettier */ +/* eslint-disable ember/no-classic-components */ /** * @module ember-paper */ import Component from '@ember/component'; -import layout from '../templates/components/paper-toast-inner'; /** * @class PaperToastInner * @extends Ember.Component */ export default Component.extend({ - layout, - tagName: '' + tagName: '', }); diff --git a/addon/templates/components/paper-toast.hbs b/addon/components/paper-toast.hbs similarity index 100% rename from addon/templates/components/paper-toast.hbs rename to addon/components/paper-toast.hbs diff --git a/addon/components/paper-toast.js b/addon/components/paper-toast.js index b7fd109d1..d342161da 100644 --- a/addon/components/paper-toast.js +++ b/addon/components/paper-toast.js @@ -1,4 +1,4 @@ -/* eslint-disable ember/no-classic-components, ember/no-component-lifecycle-hooks, ember/no-get, ember/require-computed-property-dependencies, prettier/prettier */ +/* eslint-disable ember/no-classic-components, ember/no-component-lifecycle-hooks, ember/no-get, ember/require-computed-property-dependencies */ /** * @module ember-paper */ @@ -10,7 +10,6 @@ import { computed } from '@ember/object'; import { bind, later } from '@ember/runloop'; import { guidFor } from '@ember/object/internals'; import { getOwner } from '@ember/application'; -import layout from '../templates/components/paper-toast'; import { invokeAction } from 'ember-paper/utils/invoke-action'; /** @@ -18,32 +17,31 @@ import { invokeAction } from 'ember-paper/utils/invoke-action'; * @extends Ember.Component */ export default Component.extend({ - layout, tagName: '', escapeToClose: false, swipeToClose: true, capsule: false, duration: 3000, - position: 'bottom left', - left: computed('position', function() { + left: computed('position', function () { let [, x] = this.position.split(' '); return x === 'left'; }), - top: computed('position', function() { + top: computed('position', function () { let [y] = this.position.split(' '); return y === 'top'; }), // Calculate a default that is always valid for the parent of the backdrop. wormholeSelector: '#paper-toast-fab-wormhole', + defaultedParent: or('parent', 'wormholeSelector'), // Calculate the id of the wormhole destination, setting it if need be. The // id is that of the 'parent', if provided, or 'paper-wormhole' if not. - destinationId: computed('defaultedParent', function() { + destinationId: computed('defaultedParent', function () { let config = getOwner(this).resolveRegistration('config:environment'); if (config.environment === 'test' && !this.parent) { @@ -52,9 +50,8 @@ export default Component.extend({ let parent = this.defaultedParent; - let parentEle = typeof parent === 'string' - ? document.querySelector(parent) - : parent; + let parentEle = + typeof parent === 'string' ? document.querySelector(parent) : parent; // If the parent isn't found, assume that it is an id, but that the DOM doesn't // exist yet. This only happens during integration tests or if entire application @@ -72,7 +69,7 @@ export default Component.extend({ }), // Find the element referenced by destinationId - destinationEl: computed('destinationId', function() { + destinationEl: computed('destinationId', function () { return document.querySelector(this.destinationId); }), @@ -91,7 +88,9 @@ export default Component.extend({ willInsertElement() { this._super(...arguments); - document.querySelector(this.destinationId).classList.add('md-toast-animating'); + document + .querySelector(this.destinationId) + .classList.add('md-toast-animating'); }, didInsertElement() { @@ -104,7 +103,10 @@ export default Component.extend({ if (this.escapeToClose) { // Adding Listener to body tag, FIXME this._escapeToClose = bind(this, (e) => { - if (e.keyCode === this.get('constants.KEYCODE.ESCAPE') && this.onClose) { + if ( + e.keyCode === this.get('constants.KEYCODE.ESCAPE') && + this.onClose + ) { this._destroyMessage(); } }); @@ -113,7 +115,9 @@ export default Component.extend({ let y = this.top ? 'top' : 'bottom'; - document.querySelector(this.destinationId).classList.add(`md-toast-open-${y}`); + document + .querySelector(this.destinationId) + .classList.add(`md-toast-open-${y}`); }, willDestroyElement() { @@ -124,6 +128,8 @@ export default Component.extend({ } let y = this.top ? 'top' : 'bottom'; - document.querySelector(this.destinationId).classList.remove(`md-toast-open-${y}`, 'md-toast-animating'); - } + document + .querySelector(this.destinationId) + .classList.remove(`md-toast-open-${y}`, 'md-toast-animating'); + }, }); diff --git a/addon/templates/components/paper-toaster.hbs b/addon/components/paper-toaster.hbs similarity index 100% rename from addon/templates/components/paper-toaster.hbs rename to addon/components/paper-toaster.hbs diff --git a/addon/components/paper-toaster.js b/addon/components/paper-toaster.js index 66c656fe8..9894b6c04 100644 --- a/addon/components/paper-toaster.js +++ b/addon/components/paper-toaster.js @@ -1,16 +1,14 @@ -/* eslint-disable ember/no-classic-components, prettier/prettier */ +/* eslint-disable ember/no-classic-components */ import { inject as service } from '@ember/service'; import { reads } from '@ember/object/computed'; import Component from '@ember/component'; -import layout from '../templates/components/paper-toaster'; export default Component.extend({ - layout, tagName: '', paperToaster: service(), activeToast: reads('paperToaster.activeToast'), onClose(toast) { this.paperToaster.cancelToast(toast); - } + }, }); diff --git a/addon/templates/components/paper-toolbar.hbs b/addon/components/paper-toolbar.hbs similarity index 100% rename from addon/templates/components/paper-toolbar.hbs rename to addon/components/paper-toolbar.hbs diff --git a/addon/components/paper-toolbar.js b/addon/components/paper-toolbar.js index f570d2f8a..c59cb537f 100644 --- a/addon/components/paper-toolbar.js +++ b/addon/components/paper-toolbar.js @@ -1,10 +1,9 @@ -/* eslint-disable ember/no-classic-components, ember/no-mixins, ember/require-tagless-components, prettier/prettier */ +/* eslint-disable ember/no-classic-components, ember/no-mixins, ember/require-tagless-components */ /** * @module ember-paper */ import Component from '@ember/component'; -import layout from '../templates/components/paper-toolbar'; import ColorMixin from 'ember-paper/mixins/color-mixin'; /** @@ -13,9 +12,8 @@ import ColorMixin from 'ember-paper/mixins/color-mixin'; * @uses ColorMixin */ export default Component.extend(ColorMixin, { - layout, tagName: 'md-toolbar', classNames: ['md-default-theme'], tall: false, - classNameBindings: ['tall:md-tall'] + classNameBindings: ['tall:md-tall'], }); diff --git a/addon/templates/components/paper-tooltip-inner.hbs b/addon/components/paper-tooltip-inner.hbs similarity index 100% rename from addon/templates/components/paper-tooltip-inner.hbs rename to addon/components/paper-tooltip-inner.hbs diff --git a/addon/components/paper-tooltip-inner.js b/addon/components/paper-tooltip-inner.js index 4466b4a8a..85fedffbd 100644 --- a/addon/components/paper-tooltip-inner.js +++ b/addon/components/paper-tooltip-inner.js @@ -1,16 +1,14 @@ -/* eslint-disable ember/no-classic-components, prettier/prettier */ +/* eslint-disable ember/no-classic-components */ import Component from '@ember/component'; import { computed } from '@ember/object'; import { schedule } from '@ember/runloop'; -import layout from '../templates/components/paper-tooltip-inner'; import { nextTick } from 'ember-css-transitions/utils/transition-utils'; import calculateTooltipPosition from 'ember-paper/utils/calculate-tooltip-position'; export default Component.extend({ - layout, tagName: '', - positionClass: computed('position', function() { + positionClass: computed('position', function () { return `md-origin-${this.position}`; }), @@ -20,9 +18,13 @@ export default Component.extend({ element.style.top = `${pos.top}px`; element.style.left = `${pos.left}px`; element.classList.add('md-show-add'); - nextTick().then(nextTick).then(nextTick).then(nextTick).then(() => { - element.classList.add('md-show'); - }) + nextTick() + .then(nextTick) + .then(nextTick) + .then(nextTick) + .then(() => { + element.classList.add('md-show'); + }); }); - } + }, }); diff --git a/addon/templates/components/paper-tooltip.hbs b/addon/components/paper-tooltip.hbs similarity index 100% rename from addon/templates/components/paper-tooltip.hbs rename to addon/components/paper-tooltip.hbs diff --git a/addon/components/paper-tooltip.js b/addon/components/paper-tooltip.js index ea8cf92e1..abcf6eff3 100644 --- a/addon/components/paper-tooltip.js +++ b/addon/components/paper-tooltip.js @@ -1,35 +1,30 @@ -/* eslint-disable ember/no-classic-components, ember/no-component-lifecycle-hooks, ember/require-computed-property-dependencies, prettier/prettier */ +/* eslint-disable ember/no-classic-components, ember/no-component-lifecycle-hooks, ember/require-computed-property-dependencies */ import { or } from '@ember/object/computed'; import Component from '@ember/component'; import { computed } from '@ember/object'; import { later } from '@ember/runloop'; import { htmlSafe } from '@ember/string'; import { getOwner } from '@ember/application'; -import layout from '../templates/components/paper-tooltip'; import getParent from 'ember-paper/utils/get-parent'; import { supportsPassiveEventListeners } from 'ember-paper/utils/browser-features'; export default Component.extend({ tagName: '', - layout, - position: 'bottom', - wormholeSelector: '#paper-wormhole', defaultedParent: or('parent', 'wormholeSelector'), // Calculate the id of the wormhole destination, setting it if need be. The // id is that of the 'parent', if provided, or 'paper-wormhole' if not. - destinationId: computed('defaultedParent', function() { + destinationId: computed('defaultedParent', function () { let config = getOwner(this).resolveRegistration('config:environment'); if (config.environment === 'test' && !this.parent) { return '#ember-testing'; } let parent = this.defaultedParent; - let parentEle = typeof parent === 'string' - ? document.querySelector(parent) - : parent; + let parentEle = + typeof parent === 'string' ? document.querySelector(parent) : parent; // If the parent isn't found, assume that it is an id, but that the DOM doesn't // exist yet. This only happens during integration tests or if entire application // route is a dialog. @@ -46,17 +41,17 @@ export default Component.extend({ }), // Find the element referenced by destinationId - destinationEl: computed('destinationId', function() { + destinationEl: computed('destinationId', function () { return document.querySelector(this.destinationId); }), zIndex: 100, - containerStyle: computed('zIndex', function() { + containerStyle: computed('zIndex', function () { return htmlSafe(`pointer-events: none; z-index: ${this.zIndex};`); }), - anchorElement: computed('attachTo', function() { + anchorElement: computed('attachTo', function () { let attachTo = this.attachTo; if (attachTo) { return document.querySelector(attachTo); @@ -97,9 +92,11 @@ export default Component.extend({ anchorElement.addEventListener('focus', enterEventHandler); anchorElement.addEventListener('mouseenter', enterEventHandler); - anchorElement.addEventListener('touchstart', + anchorElement.addEventListener( + 'touchstart', enterEventHandler, - supportsPassiveEventListeners ? { passive: true } : false); + supportsPassiveEventListeners ? { passive: true } : false + ); window.addEventListener('scroll', leaveHandler); window.addEventListener('blur', leaveHandler); @@ -114,5 +111,5 @@ export default Component.extend({ window.removeEventListener('blur', this.leaveHandler); window.removeEventListener('resize', this.leaveHandler); window.removeEventListener('orientationchange', this.leaveHandler); - } + }, });