diff --git a/addon/components/paper-autocomplete/component.js b/addon/components/paper-autocomplete/component.js
index e94327b36..68a64286e 100644
--- a/addon/components/paper-autocomplete/component.js
+++ b/addon/components/paper-autocomplete/component.js
@@ -13,7 +13,7 @@ import { assert } from '@ember/debug';
import { indexOfOption } from 'ember-power-select/utils/group-utils';
@tagName('')
@layout(template)
-class PaperAutocomplete extends Component.extend(ValidationMixin) {
+export default class PaperAutocomplete extends Component.extend(ValidationMixin) {
isTouched = false;
@@ -168,5 +168,3 @@ class PaperAutocomplete extends Component.extend(ValidationMixin) {
}
}
-
-export default PaperAutocomplete;
diff --git a/addon/components/paper-autocomplete/ebd-content/component.js b/addon/components/paper-autocomplete/ebd-content/component.js
index 1e20bf928..07ec56ec6 100644
--- a/addon/components/paper-autocomplete/ebd-content/component.js
+++ b/addon/components/paper-autocomplete/ebd-content/component.js
@@ -6,7 +6,7 @@ import { tagName, layout } from '@ember-decorators/component';
@tagName('')
@layout(template)
-class PaperAutocompleteEbdContent extends Component {
+export default class PaperAutocompleteEbdContent extends Component {
customStyles = {
'overflow-y': 'auto',
@@ -35,5 +35,3 @@ class PaperAutocompleteEbdContent extends Component {
}
}
-
-export default PaperAutocompleteEbdContent;
diff --git a/addon/components/paper-autocomplete/ebd-trigger/component.js b/addon/components/paper-autocomplete/ebd-trigger/component.js
index d957c1e10..d627b0672 100644
--- a/addon/components/paper-autocomplete/ebd-trigger/component.js
+++ b/addon/components/paper-autocomplete/ebd-trigger/component.js
@@ -7,11 +7,9 @@ import { and } from '@ember/object/computed';
@tagName('')
@layout(template)
-class PaperSelectEbdTrigger extends Component {
+export default class PaperSelectEbdTrigger extends Component {
@and('label', 'selected')
shouldShowLabel;
}
-
-export default PaperSelectEbdTrigger;
diff --git a/addon/components/paper-autocomplete/eps-trigger/component.js b/addon/components/paper-autocomplete/eps-trigger/component.js
index 774ce115c..bbdecbfd2 100644
--- a/addon/components/paper-autocomplete/eps-trigger/component.js
+++ b/addon/components/paper-autocomplete/eps-trigger/component.js
@@ -8,7 +8,7 @@ import unwrapProxy from 'ember-paper/utils/unwrap-proxy';
@tagName('')
@layout(template)
-class PaperSelectEpsTrigger extends Component {
+export default class PaperSelectEpsTrigger extends Component {
@computed('select.{searchText,selected}')
get text() {
@@ -76,5 +76,3 @@ class PaperSelectEpsTrigger extends Component {
}
}
-
-export default PaperSelectEpsTrigger;
diff --git a/addon/components/paper-autocomplete/highlight/component.js b/addon/components/paper-autocomplete/highlight/component.js
index 8b7f458e9..4514ce0dc 100644
--- a/addon/components/paper-autocomplete/highlight/component.js
+++ b/addon/components/paper-autocomplete/highlight/component.js
@@ -15,7 +15,7 @@ import { tagName, layout } from '@ember-decorators/component';
*/
@tagName('')
@layout(template)
-class PaperAutocompleteHighlight extends Component {
+export default class PaperAutocompleteHighlight extends Component {
flags = '';
@computed('regex', 'label')
@@ -84,5 +84,3 @@ class PaperAutocompleteHighlight extends Component {
}
}
-
-export default PaperAutocompleteHighlight;
diff --git a/addon/components/paper-autocomplete/no-matches-message/component.js b/addon/components/paper-autocomplete/no-matches-message/component.js
index bdd4cab96..ebe3f5fc4 100644
--- a/addon/components/paper-autocomplete/no-matches-message/component.js
+++ b/addon/components/paper-autocomplete/no-matches-message/component.js
@@ -7,8 +7,6 @@ import { tagName, layout } from '@ember-decorators/component';
@tagName('')
@layout(template)
-class PaperAutocompleteNoMatchesMessage extends Component {
+export default class PaperAutocompleteNoMatchesMessage extends Component {
}
-
-export default PaperAutocompleteNoMatchesMessage;
diff --git a/addon/components/paper-button.js b/addon/components/paper-button.js
index ca226b795..0b4eecd9d 100644
--- a/addon/components/paper-button.js
+++ b/addon/components/paper-button.js
@@ -6,7 +6,6 @@ import { reads } from '@ember/object/computed';
import Component from '@ember/component';
import FocusableMixin from 'ember-paper/mixins/focusable-mixin';
-import ColorMixin from 'ember-paper/mixins/color-mixin';
import ProxiableMixin from 'ember-paper/mixins/proxiable-mixin';
import { invokeAction } from 'ember-paper/utils/invoke-action';
@@ -17,7 +16,7 @@ import { invokeAction } from 'ember-paper/utils/invoke-action';
* @uses ColorMixin
* @uses ProxiableMixin
*/
-export default Component.extend(FocusableMixin, ColorMixin, ProxiableMixin, {
+export default Component.extend(FocusableMixin, ProxiableMixin, {
tagName: 'button',
classNames: ['md-default-theme', 'md-button'],
raised: false,
@@ -38,6 +37,9 @@ export default Component.extend(FocusableMixin, ColorMixin, ProxiableMixin, {
'iconButton:md-icon-button',
'fab:md-fab',
'mini:md-mini',
+ 'warn:md-warn',
+ 'accent:md-accent',
+ 'primary:md-primary',
],
init() {
diff --git a/addon/components/paper-card-header-text.hbs b/addon/components/paper-card-header-text.hbs
index 0c1a06a0e..e3b038ddf 100644
--- a/addon/components/paper-card-header-text.hbs
+++ b/addon/components/paper-card-header-text.hbs
@@ -1,4 +1,6 @@
-{{yield (hash
- title=(component "paper-card-header-title")
- subhead=(component "paper-card-header-subhead")
-)}}
\ No newline at end of file
+
+ {{yield (hash
+ title=(component "paper-card-header-title")
+ subhead=(component "paper-card-header-subhead")
+ )}}
+
\ No newline at end of file
diff --git a/addon/components/paper-card-header-text.js b/addon/components/paper-card-header-text.js
index 76fc93088..0fe10fd4c 100644
--- a/addon/components/paper-card-header-text.js
+++ b/addon/components/paper-card-header-text.js
@@ -1,4 +1,4 @@
-/* eslint-disable ember/no-classic-components, ember/require-tagless-components */
+/* eslint-disable ember/no-classic-components */
/**
* @module ember-paper
*/
@@ -9,5 +9,5 @@ import Component from '@ember/component';
* @extends Ember.Component
*/
export default Component.extend({
- tagName: 'md-card-header-text',
+ tagName: '',
});
diff --git a/addon/components/paper-card-header.hbs b/addon/components/paper-card-header.hbs
index f10d8843c..78f5f6c46 100644
--- a/addon/components/paper-card-header.hbs
+++ b/addon/components/paper-card-header.hbs
@@ -1,4 +1,6 @@
-{{yield (hash
- text=(component "paper-card-header-text")
- avatar=(component "paper-card-avatar")
-)}}
\ No newline at end of file
+
+ {{yield (hash
+ text=(component "paper-card-header-text")
+ avatar=(component "paper-card-avatar")
+ )}}
+
\ No newline at end of file
diff --git a/addon/components/paper-card-header.js b/addon/components/paper-card-header.js
index c193b932b..0384fc789 100644
--- a/addon/components/paper-card-header.js
+++ b/addon/components/paper-card-header.js
@@ -1,4 +1,4 @@
-/* eslint-disable ember/no-classic-components, ember/require-tagless-components */
+/* eslint-disable ember/no-classic-components */
/**
* @module ember-paper
*/
@@ -9,5 +9,5 @@ import Component from '@ember/component';
* @extends Ember.Component
*/
export default Component.extend({
- tagName: 'md-card-header',
+ tagName: '',
});
diff --git a/addon/components/paper-card-title-media.hbs b/addon/components/paper-card-title-media.hbs
index ff4629985..664bab168 100644
--- a/addon/components/paper-card-title-media.hbs
+++ b/addon/components/paper-card-title-media.hbs
@@ -1,8 +1,10 @@
-{{! template-lint-disable no-implicit-this }}
-{{#if (has-block)}}
-
- {{yield}}
-
-{{else}}
-
-{{/if}}
\ No newline at end of file
+
+ {{! template-lint-disable no-implicit-this }}
+ {{#if (has-block)}}
+
+ {{yield}}
+
+ {{else}}
+
+ {{/if}}
+
\ No newline at end of file
diff --git a/addon/components/paper-card-title-media.js b/addon/components/paper-card-title-media.js
index 3f050efef..83a269e5b 100644
--- a/addon/components/paper-card-title-media.js
+++ b/addon/components/paper-card-title-media.js
@@ -1,4 +1,4 @@
-/* eslint-disable ember/no-classic-components, ember/require-tagless-components */
+/* eslint-disable ember/no-classic-components */
/**
* @module ember-paper
*/
@@ -9,6 +9,6 @@ import Component from '@ember/component';
* @extends Ember.Component
*/
export default Component.extend({
- tagName: 'md-card-title-media',
+ tagName: '',
size: 'md',
});
diff --git a/addon/components/paper-card-title-text.hbs b/addon/components/paper-card-title-text.hbs
index 99c80930b..8498d188d 100644
--- a/addon/components/paper-card-title-text.hbs
+++ b/addon/components/paper-card-title-text.hbs
@@ -1,4 +1,6 @@
-{{yield (hash
- headline=(component "paper-card-header-headline")
- subhead=(component "paper-card-header-subhead")
-)}}
\ No newline at end of file
+
+ {{yield (hash
+ headline=(component "paper-card-header-headline")
+ subhead=(component "paper-card-header-subhead")
+ )}}
+
\ No newline at end of file
diff --git a/addon/components/paper-card-title-text.js b/addon/components/paper-card-title-text.js
index 30a5182c5..e7cbae3a6 100644
--- a/addon/components/paper-card-title-text.js
+++ b/addon/components/paper-card-title-text.js
@@ -1,4 +1,4 @@
-/* eslint-disable ember/no-classic-components, ember/require-tagless-components */
+/* eslint-disable ember/no-classic-components */
/**
* @module ember-paper
*/
@@ -9,5 +9,5 @@ import Component from '@ember/component';
* @extends Ember.Component
*/
export default Component.extend({
- tagName: 'md-card-title-text',
+ tagName: '',
});
diff --git a/addon/components/paper-card-title.hbs b/addon/components/paper-card-title.hbs
index fae5ccd2f..581f532eb 100644
--- a/addon/components/paper-card-title.hbs
+++ b/addon/components/paper-card-title.hbs
@@ -1,4 +1,6 @@
-{{yield (hash
- text=(component "paper-card-title-text")
- media=(component "paper-card-title-media")
-)}}
\ No newline at end of file
+
+ {{yield (hash
+ text=(component "paper-card-title-text")
+ media=(component "paper-card-title-media")
+ )}}
+
\ No newline at end of file
diff --git a/addon/components/paper-card-title.js b/addon/components/paper-card-title.js
index fe80da305..e06e181ae 100644
--- a/addon/components/paper-card-title.js
+++ b/addon/components/paper-card-title.js
@@ -1,4 +1,4 @@
-/* eslint-disable ember/no-classic-components, ember/require-tagless-components */
+/* eslint-disable ember/no-classic-components */
/**
* @module ember-paper
*/
@@ -9,5 +9,5 @@ import Component from '@ember/component';
* @extends Ember.Component
*/
export default Component.extend({
- tagName: 'md-card-title',
+ tagName: '',
});
diff --git a/addon/components/paper-card.hbs b/addon/components/paper-card.hbs
index 4749579b0..37d26dc64 100644
--- a/addon/components/paper-card.hbs
+++ b/addon/components/paper-card.hbs
@@ -1,8 +1,10 @@
-{{yield (hash
- title=(component "paper-card-title")
- content=(component "paper-card-content")
- actions=(component "paper-card-actions")
- header=(component "paper-card-header")
- image=(component "paper-card-image")
- media=(component "paper-card-media")
-)}}
\ No newline at end of file
+
+ {{yield (hash
+ title=(component "paper-card-title")
+ content=(component "paper-card-content")
+ actions=(component "paper-card-actions")
+ header=(component "paper-card-header")
+ image=(component "paper-card-image")
+ media=(component "paper-card-media")
+ )}}
+
\ No newline at end of file
diff --git a/addon/components/paper-card.js b/addon/components/paper-card.js
index d3d820984..0d64f75e4 100644
--- a/addon/components/paper-card.js
+++ b/addon/components/paper-card.js
@@ -1,4 +1,4 @@
-/* eslint-disable ember/no-classic-components, ember/require-tagless-components */
+/* eslint-disable ember/no-classic-components */
/**
* @module ember-paper
*/
@@ -9,5 +9,5 @@ import Component from '@ember/component';
* @extends Ember.Component
*/
export default Component.extend({
- tagName: 'md-card',
+ tagName: '',
});
diff --git a/addon/components/paper-checkbox.js b/addon/components/paper-checkbox.js
index 50af5c3ae..9a40eb884 100644
--- a/addon/components/paper-checkbox.js
+++ b/addon/components/paper-checkbox.js
@@ -9,7 +9,6 @@ import { not, and } from '@ember/object/computed';
import Component from '@ember/component';
import { assert } from '@ember/debug';
import FocusableMixin from 'ember-paper/mixins/focusable-mixin';
-import ColorMixin from 'ember-paper/mixins/color-mixin';
import ProxiableMixin from 'ember-paper/mixins/proxiable-mixin';
import { invokeAction } from 'ember-paper/utils/invoke-action';
/**
@@ -19,10 +18,16 @@ import { invokeAction } from 'ember-paper/utils/invoke-action';
* @uses ColorMixin
* @uses ProxiableMixin
*/
-export default Component.extend(FocusableMixin, ColorMixin, ProxiableMixin, {
+export default Component.extend(FocusableMixin, ProxiableMixin, {
tagName: 'md-checkbox',
classNames: ['md-checkbox', 'md-default-theme'],
- classNameBindings: ['isChecked:md-checked', 'indeterminate:md-indeterminate'],
+ classNameBindings: [
+ 'isChecked:md-checked',
+ 'indeterminate:md-indeterminate',
+ 'warn:md-warn',
+ 'accent:md-accent',
+ 'primary:md-primary',
+ ],
attributeBindings: [
'role:role',
diff --git a/addon/components/paper-chips/component.js b/addon/components/paper-chips/component.js
index f1b7fdd91..56a5e86f7 100644
--- a/addon/components/paper-chips/component.js
+++ b/addon/components/paper-chips/component.js
@@ -9,7 +9,7 @@ import { tagName, layout } from '@ember-decorators/component';
@tagName('')
@layout(template)
-class PaperChips extends Component {
+export default class PaperChips extends Component {
activeChip = -1;
searchText = '';
@@ -159,5 +159,3 @@ class PaperChips extends Component {
@action
noop() {}
}
-
-export default PaperChips;
diff --git a/addon/components/paper-contact-chips/component.js b/addon/components/paper-contact-chips/component.js
index 1994512f2..f468a9611 100644
--- a/addon/components/paper-contact-chips/component.js
+++ b/addon/components/paper-contact-chips/component.js
@@ -6,12 +6,10 @@ import { tagName, layout } from '@ember-decorators/component';
@tagName('')
@layout(template)
-class PaperContactChips extends Component {
+export default class PaperContactChips extends Component {
requireMatch = true;
searchField = 'email';
emailField = 'email';
nameField = 'name';
imageField = 'image';
}
-
-export default PaperContactChips;
diff --git a/addon/components/paper-content/component.js b/addon/components/paper-content/component.js
index c2d0ae7b1..c6692a301 100644
--- a/addon/components/paper-content/component.js
+++ b/addon/components/paper-content/component.js
@@ -12,6 +12,4 @@ import template from './template';
*/
@tagName('')
@layout(template)
-class PaperContent extends Component {}
-
-export default PaperContent;
+export default class PaperContent extends Component {}
diff --git a/addon/components/paper-dialog.hbs b/addon/components/paper-dialog.hbs
index a57646227..150b96a43 100644
--- a/addon/components/paper-dialog.hbs
+++ b/addon/components/paper-dialog.hbs
@@ -1,6 +1,6 @@
{{! template-lint-disable no-action no-implicit-this }}
{{#in-element destinationEl insertBefore=null}}
-
+
{{yield}}
diff --git a/addon/components/paper-divider/component.js b/addon/components/paper-divider/component.js
index bd0f73d95..de33c5ff0 100644
--- a/addon/components/paper-divider/component.js
+++ b/addon/components/paper-divider/component.js
@@ -12,6 +12,4 @@ import template from './template';
*/
@tagName('')
@layout(template)
-class PaperDivider extends Component { }
-
-export default PaperDivider;
+export default class PaperDivider extends Component { }
diff --git a/addon/components/paper-grid-tile-footer.hbs b/addon/components/paper-grid-tile-footer.hbs
index 9b63ca13a..9a60ca19f 100644
--- a/addon/components/paper-grid-tile-footer.hbs
+++ b/addon/components/paper-grid-tile-footer.hbs
@@ -1,3 +1,5 @@
-
- {{yield}}
-
+
+
+ {{yield}}
+
+
\ No newline at end of file
diff --git a/addon/components/paper-grid-tile-footer.js b/addon/components/paper-grid-tile-footer.js
index dff544207..2491274eb 100644
--- a/addon/components/paper-grid-tile-footer.js
+++ b/addon/components/paper-grid-tile-footer.js
@@ -1,4 +1,4 @@
-/* eslint-disable ember/no-classic-components, ember/require-tagless-components */
+/* eslint-disable ember/no-classic-components */
/**
* @module ember-paper
*/
@@ -9,5 +9,5 @@ import Component from '@ember/component';
* @extends Ember.Component
*/
export default Component.extend({
- tagName: 'md-grid-tile-footer',
+ tagName: '',
});
diff --git a/addon/components/paper-icon.js b/addon/components/paper-icon.js
index 0649da247..c40fa81d8 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 */
+/* eslint-disable ember/no-classic-components, ember/no-get-with-default, ember/require-tagless-components */
/**
* @module ember-paper
*/
@@ -8,17 +8,20 @@ import { computed } from '@ember/object';
import { reads } from '@ember/object/computed';
import { htmlSafe } from '@ember/string';
-import ColorMixin from 'ember-paper/mixins/color-mixin';
-
/**
* @class PaperIcon
* @extends Ember.Component
* @uses ColorMixin
*/
-let PaperIconComponent = Component.extend(ColorMixin, {
+let PaperIconComponent = Component.extend({
tagName: 'md-icon',
classNames: ['paper-icon', 'md-font', 'material-icons', 'md-default-theme'],
- classNameBindings: ['spinClass'],
+ classNameBindings: [
+ 'spinClass',
+ 'warn:md-warn',
+ 'accent:md-accent',
+ 'primary:md-primary',
+ ],
attributeBindings: [
'aria-hidden',
'aria-label',
diff --git a/addon/components/paper-input.js b/addon/components/paper-input.js
index c4c8d0587..f8d44b4e0 100644
--- a/addon/components/paper-input.js
+++ b/addon/components/paper-input.js
@@ -10,7 +10,6 @@ import { isEmpty } from '@ember/utils';
import { bind, next } from '@ember/runloop';
import { assert } from '@ember/debug';
import FocusableMixin from 'ember-paper/mixins/focusable-mixin';
-import ColorMixin from 'ember-paper/mixins/color-mixin';
import ChildMixin from 'ember-paper/mixins/child-mixin';
import ValidationMixin from 'ember-paper/mixins/validation-mixin';
import { invokeAction } from 'ember-paper/utils/invoke-action';
@@ -23,199 +22,194 @@ import { invokeAction } from 'ember-paper/utils/invoke-action';
* @uses ColorMixin
* @uses ValidationMixin
*/
-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;
- },
-
- 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();
+export default Component.extend(FocusableMixin, 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',
+ 'warn:md-warn',
+ 'accent:md-accent',
+ 'primary:md-primary',
+ ],
+
+ 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}`;
},
-
- willDestroyElement() {
- this._super(...arguments);
- if (this.textarea) {
- window.removeEventListener('resize', this._growTextareaOnResize);
- this._growTextareaOnResize = null;
- }
+ // 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;
+ },
+
+ 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);
- growTextarea() {
- if (this.textarea) {
- let inputElement = this.element.querySelector('input, textarea');
- inputElement.classList.add('md-no-flex');
- inputElement.setAttribute('rows', 1);
+ inputElement.style.height = `${this.lineHeight * rowsToSet}px`;
+ inputElement.setAttribute('rows', rowsToSet);
- 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');
- }
+ if (proposedHeight >= maxRows) {
+ inputElement.classList.add('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-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');
}
- },
- getHeight(inputElement) {
- let { offsetHeight } = inputElement;
- let line = inputElement.scrollHeight - offsetHeight;
- return offsetHeight + (line > 0 ? line : 0);
- },
+ 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;
+
+ if (this.element.querySelector('input, textarea').value !== value) {
+ this.element.querySelector('input, textarea').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;
}
+ this.set('isNativeInvalid', isNativeInvalid);
+ 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();
- },
+ handleBlur(e) {
+ invokeAction(this, 'onBlur', e);
+ this.set('isTouched', true);
+ this.notifyValidityChange();
},
- }
-);
+ },
+});
diff --git a/addon/components/paper-menu/component.js b/addon/components/paper-menu/component.js
index a6867eeb3..96f009df3 100644
--- a/addon/components/paper-menu/component.js
+++ b/addon/components/paper-menu/component.js
@@ -7,7 +7,7 @@ import template from './template';
@tagName('')
@layout(template)
-class PaperMenu extends Component {
+export default class PaperMenu extends Component {
@action
close() {
@@ -51,5 +51,3 @@ class PaperMenu extends Component {
return positionCalculator.drowdownPosition;
}
}
-
-export default PaperMenu;
diff --git a/addon/components/paper-menu/content/component.js b/addon/components/paper-menu/content/component.js
index 96a62be56..22974cb71 100644
--- a/addon/components/paper-menu/content/component.js
+++ b/addon/components/paper-menu/content/component.js
@@ -33,7 +33,7 @@ function waitForAnimations(element, callback) {
@tagName('')
@layout(template)
-class PaperMenuContent extends Component {
+export default class PaperMenuContent extends Component {
isActive = false;
@@ -142,5 +142,3 @@ function isFocusable(el) {
// is a menu-item, doesn't have tabindex -1 and is not disabled
return el && el.tagName === 'MD-MENU-ITEM' && el.getAttribute('tabindex') !== -1 && el.getAttribute('disabled') === null;
}
-
-export default PaperMenuContent;
diff --git a/addon/components/paper-menu/item/component.js b/addon/components/paper-menu/item/component.js
index 5e06bdded..d56e1fc9b 100644
--- a/addon/components/paper-menu/item/component.js
+++ b/addon/components/paper-menu/item/component.js
@@ -9,7 +9,7 @@ import { tagName, layout } from '@ember-decorators/component';
@tagName('')
@layout(template)
-class PaperMenuItem extends Component {
+export default class PaperMenuItem extends Component {
@or('onClick', 'href')
shouldRenderButton;
@@ -32,5 +32,3 @@ class PaperMenuItem extends Component {
}
}
}
-
-export default PaperMenuItem;
diff --git a/addon/components/paper-menu/trigger/component.js b/addon/components/paper-menu/trigger/component.js
index af86639d5..627b2d41e 100644
--- a/addon/components/paper-menu/trigger/component.js
+++ b/addon/components/paper-menu/trigger/component.js
@@ -6,8 +6,6 @@ import { tagName, layout } from '@ember-decorators/component';
@tagName('')
@layout(template)
-class PaperMenuTrigger extends Component {
+export default class PaperMenuTrigger extends Component {
}
-
-export default PaperMenuTrigger;
diff --git a/addon/components/paper-progress-circular.js b/addon/components/paper-progress-circular.js
index 4578c2b9f..959aa6737 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 */
+/* eslint-disable ember/no-classic-components, ember/no-component-lifecycle-hooks, 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 ColorMixin from 'ember-paper/mixins/color-mixin';
import clamp from 'ember-paper/utils/clamp';
const MODE_DETERMINATE = 'determinate';
@@ -53,13 +52,16 @@ function materialEase(t, b, c, d) {
* @extends Ember.Component
* @uses ColorMixin
*/
-export default Component.extend(ColorMixin, {
+export default Component.extend({
tagName: 'md-progress-circular',
classNames: ['md-default-theme'],
attributeBindings: ['value', 'mode:md-mode', 'containerStyle:style'],
classNameBindings: [
'spinnerClass',
'disabled:_md-progress-circular-disabled',
+ 'warn:md-warn',
+ 'accent:md-accent',
+ 'primary:md-primary',
],
diameter: 50,
strokeRatio: 0.1,
diff --git a/addon/components/paper-progress-linear.hbs b/addon/components/paper-progress-linear.hbs
index 91bec9c31..9fa9b86b3 100644
--- a/addon/components/paper-progress-linear.hbs
+++ b/addon/components/paper-progress-linear.hbs
@@ -1,6 +1,8 @@
-{{! template-lint-disable no-implicit-this }}
-
+
+ {{! template-lint-disable no-implicit-this }}
+
+
\ No newline at end of file
diff --git a/addon/components/paper-progress-linear.js b/addon/components/paper-progress-linear.js
index 655db843c..1e51b8df2 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 */
+/* eslint-disable ember/no-classic-components, ember/no-get, ember/require-computed-property-dependencies */
/**
* @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 ColorMixin from 'ember-paper/mixins/color-mixin';
function makeTransform(value) {
let scale = value / 100;
@@ -26,10 +25,8 @@ const MODE_QUERY = 'query';
* @extends Ember.Component
* @uses ColorMixin
*/
-export default Component.extend(ColorMixin, {
- tagName: 'md-progress-linear',
- attributeBindings: ['mode:md-mode', 'bufferValue:md-buffer-value'],
- classNames: ['md-default-theme'],
+export default Component.extend({
+ tagName: '',
constants: service(),
mode: computed('value', {
diff --git a/addon/components/paper-radio-base.js b/addon/components/paper-radio-base.js
index f27e928d4..31f80b3b9 100644
--- a/addon/components/paper-radio-base.js
+++ b/addon/components/paper-radio-base.js
@@ -7,7 +7,6 @@ import Component from '@ember/component';
import { computed } from '@ember/object';
import { assert } from '@ember/debug';
import FocusableMixin from 'ember-paper/mixins/focusable-mixin';
-import ColorMixin from 'ember-paper/mixins/color-mixin';
import { invokeAction } from 'ember-paper/utils/invoke-action';
/**
@@ -16,10 +15,15 @@ import { invokeAction } from 'ember-paper/utils/invoke-action';
* @uses FocusableMixin
* @uses ColorMixin
*/
-export default Component.extend(FocusableMixin, ColorMixin, {
+export default Component.extend(FocusableMixin, {
tagName: 'md-radio-button',
classNames: ['md-default-theme'],
- classNameBindings: ['checked:md-checked'],
+ classNameBindings: [
+ 'checked:md-checked',
+ 'warn:md-warn',
+ 'accent:md-accent',
+ 'primary:md-primary',
+ ],
attributeBindings: [
'role',
diff --git a/addon/components/paper-ripple/component.js b/addon/components/paper-ripple/component.js
index f68e03317..ed41893f9 100644
--- a/addon/components/paper-ripple/component.js
+++ b/addon/components/paper-ripple/component.js
@@ -11,7 +11,7 @@ const DURATION = 400;
@tagName('')
@layout(template)
-class PaperRipple extends Component {
+export default class PaperRipple extends Component {
_parentFinder = self.document ? self.document.createTextNode('') : '';
center = false;
@@ -309,5 +309,3 @@ class PaperRipple extends Component {
this.lastRipple = null;
}
}
-
-export default PaperRipple;
diff --git a/addon/components/paper-select/component.js b/addon/components/paper-select/component.js
index 3d31a4c27..c06f3dd5e 100644
--- a/addon/components/paper-select/component.js
+++ b/addon/components/paper-select/component.js
@@ -24,7 +24,7 @@ function getOffsetRect(node) {
@tagName('')
@layout(template)
-class PaperSelect extends Component.extend(ValidationMixin, ChildMixin) {
+export default class PaperSelect extends Component.extend(ValidationMixin, ChildMixin) {
validationProperty = 'selected';
isTouched = false;
@@ -201,5 +201,3 @@ class PaperSelect extends Component.extend(ValidationMixin, ChildMixin) {
}
}
-
-export default PaperSelect;
diff --git a/addon/components/paper-select/ebd-content/component.js b/addon/components/paper-select/ebd-content/component.js
index f406b3249..3fa192aa8 100644
--- a/addon/components/paper-select/ebd-content/component.js
+++ b/addon/components/paper-select/ebd-content/component.js
@@ -36,7 +36,7 @@ function waitForAnimations(element, callback) {
@tagName('')
@layout(template)
-class PaperSelectEbdContent extends Component {
+export default class PaperSelectEbdContent extends Component {
@computed('otherStyles', 'isActive')
get customStyles() {
@@ -183,5 +183,3 @@ function isFocusable(el) {
// is a menu-item, doesn't have tabindex -1 and is not disabled
return el && el.tagName === 'MD-OPTION' && el.getAttribute('tabindex') !== -1 && el.getAttribute('disabled') === null && el.getAttribute('aria-disabled') !== true;
}
-
-export default PaperSelectEbdContent;
diff --git a/addon/components/paper-select/ebd-trigger/component.js b/addon/components/paper-select/ebd-trigger/component.js
index d957c1e10..d627b0672 100644
--- a/addon/components/paper-select/ebd-trigger/component.js
+++ b/addon/components/paper-select/ebd-trigger/component.js
@@ -7,11 +7,9 @@ import { and } from '@ember/object/computed';
@tagName('')
@layout(template)
-class PaperSelectEbdTrigger extends Component {
+export default class PaperSelectEbdTrigger extends Component {
@and('label', 'selected')
shouldShowLabel;
}
-
-export default PaperSelectEbdTrigger;
diff --git a/addon/components/paper-select/eps-trigger/component.js b/addon/components/paper-select/eps-trigger/component.js
index 49fb45848..9ea026253 100644
--- a/addon/components/paper-select/eps-trigger/component.js
+++ b/addon/components/paper-select/eps-trigger/component.js
@@ -7,7 +7,7 @@ import { computed, action } from '@ember/object';
@tagName('')
@layout(template)
-class PaperSelectEpsTrigger extends Component {
+export default class PaperSelectEpsTrigger extends Component {
@computed('placeholder', 'extra.label', 'select.selected')
get isPlaceholder() {
@@ -24,5 +24,3 @@ class PaperSelectEpsTrigger extends Component {
}
}
-
-export default PaperSelectEpsTrigger;
diff --git a/addon/components/paper-select/no-matches-message/component.js b/addon/components/paper-select/no-matches-message/component.js
index f2db6eacd..bf496b203 100644
--- a/addon/components/paper-select/no-matches-message/component.js
+++ b/addon/components/paper-select/no-matches-message/component.js
@@ -7,8 +7,6 @@ import { tagName, layout } from '@ember-decorators/component';
@tagName('')
@layout(template)
-class PaperSelectNoMatchesMessage extends Component {
+export default class PaperSelectNoMatchesMessage extends Component {
}
-
-export default PaperSelectNoMatchesMessage;
diff --git a/addon/components/paper-select/option/component.js b/addon/components/paper-select/option/component.js
index 999a05ac9..19da7a71a 100644
--- a/addon/components/paper-select/option/component.js
+++ b/addon/components/paper-select/option/component.js
@@ -14,7 +14,5 @@ import { tagName, layout } from '@ember-decorators/component';
*/
@tagName('')
@layout(template)
-class PaperSelectOption extends Component {
+export default class PaperSelectOption extends Component {
}
-
-export default PaperSelectOption;
diff --git a/addon/components/paper-select/search-message/component.js b/addon/components/paper-select/search-message/component.js
index 6256e6e99..769e01ba0 100644
--- a/addon/components/paper-select/search-message/component.js
+++ b/addon/components/paper-select/search-message/component.js
@@ -7,8 +7,6 @@ import { tagName, layout } from '@ember-decorators/component';
@tagName('')
@layout(template)
-class PaperSelectSearchMessage extends Component {
+export default class PaperSelectSearchMessage extends Component {
}
-
-export default PaperSelectSearchMessage;
diff --git a/addon/components/paper-sidenav.hbs b/addon/components/paper-sidenav.hbs
index 9fafa7eff..2424276bb 100644
--- a/addon/components/paper-sidenav.hbs
+++ b/addon/components/paper-sidenav.hbs
@@ -1,10 +1,10 @@
{{! template-lint-disable no-action no-implicit-this }}
{{#unless closed}}
-
+
{{/unless}}
+ {{! template-lint-disable no-implicit-this }}
+ {{yield (hash
+ action=(component "paper-speed-dial-actions-action" speedDial=speedDial)
+ )}}
+
\ No newline at end of file
diff --git a/addon/components/paper-speed-dial-actions.js b/addon/components/paper-speed-dial-actions.js
index 340a498c5..4873bd6ae 100644
--- a/addon/components/paper-speed-dial-actions.js
+++ b/addon/components/paper-speed-dial-actions.js
@@ -1,6 +1,6 @@
-/* eslint-disable ember/no-classic-components, ember/require-tagless-components */
+/* eslint-disable ember/no-classic-components */
import Component from '@ember/component';
export default Component.extend({
- tagName: 'md-fab-actions',
+ tagName: '',
});
diff --git a/addon/components/paper-subheader.hbs b/addon/components/paper-subheader.hbs
index 13fd22df5..d42cad743 100644
--- a/addon/components/paper-subheader.hbs
+++ b/addon/components/paper-subheader.hbs
@@ -1,5 +1,7 @@
-