diff --git a/addon/components/mdc-button.js b/addon/components/mdc-button.js index b369f71..88c9497 100644 --- a/addon/components/mdc-button.js +++ b/addon/components/mdc-button.js @@ -7,11 +7,27 @@ export default Ember.Component.extend(MDCComponent, { /** * @type {Boolean} */ - accent: false, + secondary: false, /** * @type {Boolean} */ raised: false, + /** + * @type {Boolean} + */ + unelevated: false, + /** + * @type {Boolean} + */ + compact: false, + /** + * @type {Boolean} + */ + dense: false, + /** + * @type {Boolean} + */ + stroked: false, /** * @type {Boolean} */ @@ -26,7 +42,15 @@ export default Ember.Component.extend(MDCComponent, { layout, tagName: 'button', classNames: 'mdc-button', - classNameBindings: ['accent:mdc-button--accent', 'raised:mdc-button--raised', 'mdcClassNames'], + classNameBindings: [ + 'secondary:mdc-button--accent', + 'raised:mdc-button--raised', + 'unelevated:mdc-button--unelevated', + 'compact:mdc-button--compact', + 'dense:mdc-button--dense', + 'stroked:mdc-button--stroked', + 'mdcClassNames' + ], attributeBindings: ['disabled', 'type', 'style'], //endregion diff --git a/addon/components/mdc-linear-progress.js b/addon/components/mdc-linear-progress.js index e23affb..78da9a2 100644 --- a/addon/components/mdc-linear-progress.js +++ b/addon/components/mdc-linear-progress.js @@ -29,7 +29,7 @@ export default Ember.Component.extend(MDCComponent, { /** * @type {Boolean} */ - accent: false, + secondary: false, /** * @type {Number} @@ -45,7 +45,7 @@ export default Ember.Component.extend(MDCComponent, { `indeterminate:${cssClasses.INDETERMINATE_CLASS}`, `closed:${cssClasses.CLOSED_CLASS}`, `reversed:${cssClasses.REVERSED_CLASS}`, - 'accent:mdc-linear-progress--accent' + 'secondary:mdc-linear-progress--accent' ], attributeBindings: ['role'], init() { diff --git a/addon/components/mdc-menu.js b/addon/components/mdc-menu.js index 671d041..9bf00d9 100644 --- a/addon/components/mdc-menu.js +++ b/addon/components/mdc-menu.js @@ -2,11 +2,11 @@ import Ember from 'ember'; import layout from '../templates/components/mdc-menu'; import { MDCComponent } from '../mixins/mdc-component'; import styleComputed from '../utils/style-computed'; -import { MDCSimpleMenuFoundation } from '@material/menu'; +import { MDCSimpleMenuFoundation, util } from '@material/menu'; const { get, set } = Ember; const { strings } = MDCSimpleMenuFoundation; -const TRANSFORM_PROPERTY = ('transform' in document.createElement('span')) ? 'transform' : 'webkitTransform'; +const TRANSFORM_PROPERTY = util.getTransformPropertyName(window); /** * @typedef {Ember.Component} MDCMenuComponent diff --git a/addon/components/mdc-textfield.js b/addon/components/mdc-textfield.js index 6b0b1f1..9a65aa7 100644 --- a/addon/components/mdc-textfield.js +++ b/addon/components/mdc-textfield.js @@ -1,8 +1,11 @@ import Ember from 'ember'; import layout from '../templates/components/mdc-textfield'; import { MDCComponent, addClass, removeClass } from '../mixins/mdc-component'; +import getElementProperty from '../utils/get-element-property'; import { MDCTextfieldFoundation } from '@material/textfield'; +import { util } from '@material/ripple'; +const MATCHES = util.getMatchesProperty(HTMLElement.prototype); const { cssClasses } = MDCTextfieldFoundation; const { get, set, computed } = Ember; @@ -27,6 +30,11 @@ export default Ember.Component.extend(MDCComponent, { * @type {String} */ type: 'text', + /** + * Render as a box instead of a bare textfield + * @type {Boolean} + */ + box: false, /** * This will be called when the user indicates they want to change the value * of the input. If you want to simulate two-way binding, you can use the @@ -42,6 +50,10 @@ export default Ember.Component.extend(MDCComponent, { * @type {Boolean} */ valid: true, + /** + * @type {Boolean} + */ + 'bad-input': false, /** * @type {?String} */ @@ -123,12 +135,18 @@ export default Ember.Component.extend(MDCComponent, { * @type {Object} */ CLASS_NAMES: cssClasses, + rippleOptions() { + return { + isSurfaceActive: () => getElementProperty(this, 'querySelector', () => [{[MATCHES]: () => false}])('input, textarea')[0][MATCHES](':active') + }; + }, //endregion //region Computed Properties /** * @type {String} */ + ripple: computed.bool('box'), labelClassnames: computed('value', 'labelClasses.[]', function() { const classnames = Ember.A([]); if (get(this, 'value')) { @@ -212,12 +230,7 @@ export default Ember.Component.extend(MDCComponent, { get(component, 'inputKeydownHandlers').removeObject(handler); }, getNativeInput() { - const value = get(component, 'value'); - return { - value, - disabled: get(component, 'disabled'), - checkValidity: () => get(component, 'valid') - }; + return getElementProperty(component, 'querySelector', () => [null])('input, textarea')[0]; } }); }, diff --git a/addon/templates/components/mdc-textfield.hbs b/addon/templates/components/mdc-textfield.hbs index 7411ebe..42754ed 100644 --- a/addon/templates/components/mdc-textfield.hbs +++ b/addon/templates/components/mdc-textfield.hbs @@ -1,4 +1,4 @@ -