@xdam/ember-partials 1.1.1 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -3,7 +3,7 @@ import { classNames, layout, attribute } from '@ember-decorators/component';
3
3
  import template from '@xdam/ember-partials/templates/components/xep-chip-text';
4
4
 
5
5
  @layout(template)
6
- @classNames('xep-chip-text', 'mdc-chip__text')
6
+ @classNames('xep-chip-text', 'mdc-chip__text', 'mdc-evolution-chip-set')
7
7
  export default class XepChipTextComponent extends Component {
8
8
  /**
9
9
  * Add a test selector for data attribute: `[data-test-chip-text]`
@@ -47,7 +47,7 @@ export default class XepChipComponent extends Component {
47
47
  * @argument [selected]
48
48
  * @type {Boolean}
49
49
  */
50
- @className('mdc-chip--selected')
50
+ @className('mdc-chip--selected', 'mdc-evolution-chip--selected')
51
51
  selected = false;
52
52
 
53
53
  /**
@@ -1,7 +1,8 @@
1
1
  import Component from '@ember/component';
2
2
  import { classNames, layout, attribute } from '@ember-decorators/component';
3
3
  import template from '@xdam/ember-partials/templates/components/xep-menu';
4
- import { MDCMenuSurface, Corner } from '@material/menu-surface';
4
+ import { Corner } from '@material/menu-surface';
5
+ import { MDCMenu } from '@material/menu';
5
6
  import { inject as service } from '@ember/service';
6
7
  import { addEventListener, runDisposables } from 'ember-lifeline';
7
8
  import classic from 'ember-classic-decorator';
@@ -111,7 +112,7 @@ export default class XepMenuComponent extends Component {
111
112
  didInsertElement() {
112
113
  super.didInsertElement(...arguments);
113
114
 
114
- this.mdcComponent = new MDCMenuSurface(this.element);
115
+ this.mdcComponent = new MDCMenu(this.element);
115
116
  updateDirtyProps(this.trackedProps, this, this.mdcComponent);
116
117
 
117
118
  this.setupPositioning();
@@ -21,6 +21,9 @@ const VARIANT_TYPES = {
21
21
  /**
22
22
  * A component modeled after the browser’s `<input type="range">` element.
23
23
  *
24
+ * TODO: this component no longer works after upgrading material design to v14.
25
+ * The component is not used an was not prioritized to get it working
26
+ *
24
27
  * @class XepSlider
25
28
  * @public
26
29
  */
@@ -39,24 +42,24 @@ export default class XepSliderComponent extends Component {
39
42
  @attribute('data-test-slider')
40
43
  testSelector;
41
44
 
42
- @attribute
43
- role = 'slider';
45
+ // @attribute
46
+ // role = 'slider';
44
47
 
45
- @alias('min')
46
- @attribute('aria-valuemin')
47
- ariaValueMin;
48
+ // @alias('min')
49
+ // @attribute('aria-valuemin')
50
+ // ariaValueMin;
48
51
 
49
- @alias('max')
50
- @attribute('aria-valuemax')
51
- ariaValueMax;
52
+ // @alias('max')
53
+ // @attribute('aria-valuemax')
54
+ // ariaValueMax;
52
55
 
53
- @alias('value')
54
- @attribute('aria-valuenow')
55
- ariaValueNow;
56
+ // @alias('value')
57
+ // @attribute('aria-valuenow')
58
+ // ariaValueNow;
56
59
 
57
- @alias('disabled')
58
- @attribute('aria-disabled')
59
- ariaDisabled;
60
+ // @alias('disabled')
61
+ // @attribute('aria-disabled')
62
+ // ariaDisabled;
60
63
 
61
64
  /**
62
65
  * Recomputes the dimensions and re-lays out the component. This should be called if the
@@ -88,6 +91,7 @@ export default class XepSliderComponent extends Component {
88
91
  * @argument [disabled]
89
92
  * @type {Boolean}
90
93
  */
94
+ @className('mdc-slider--disabled')
91
95
  disabled;
92
96
 
93
97
  /**
@@ -122,6 +126,10 @@ export default class XepSliderComponent extends Component {
122
126
  */
123
127
  value = 0;
124
128
 
129
+ get workingValue() {
130
+ return this.value || 0;
131
+ }
132
+
125
133
  /**
126
134
  * The minimum value a slider can have. Values set programmatically will be clamped to this minimum value.
127
135
  * Changing this property will update the slider’s value if it is lower than the new minimum. Defaults to `0`.
@@ -173,6 +181,7 @@ export default class XepSliderComponent extends Component {
173
181
 
174
182
  didInsertElement() {
175
183
  super.didInsertElement(...arguments);
184
+
176
185
  this.mdcComponent = new MDCSlider(this.element);
177
186
  updateDirtyProps(this.trackedProps, this, this.mdcComponent);
178
187
 
@@ -4,7 +4,7 @@ import template from '@xdam/ember-partials/templates/components/xep-switch';
4
4
  import { MDCSwitch } from '@material/switch';
5
5
  import { guidFor } from '@ember/object/internals';
6
6
  import { inject as service } from '@ember/service';
7
- import { addEventListener, runDisposables } from 'ember-lifeline';
7
+ import { runDisposables } from 'ember-lifeline';
8
8
  import classic from 'ember-classic-decorator';
9
9
 
10
10
  import updateDirtyProps from '@xdam/ember-partials/utils/update-dirty-props';
@@ -72,9 +72,6 @@ export default class XepSwitchComponent extends Component {
72
72
  this.mdcComponent = this.mdcComponent || new MDCSwitch(this.element.querySelector('.mdc-switch'));
73
73
  updateDirtyProps(this.trackedProps, this, this.mdcComponent);
74
74
 
75
- const nativeInput = this.element.querySelector('.mdc-switch__native-control');
76
- addEventListener(this, nativeInput, 'change', evt => this.set('checked', evt.srcElement.checked));
77
-
78
75
  if (this.register) {
79
76
  this.xepManager.registerComponent(this, this.register);
80
77
  }
@@ -1,7 +1,28 @@
1
- <div class="mdc-slider__track-container">
2
- <div class="mdc-slider__track"></div>
1
+ <input
2
+ class="mdc-slider__input"
3
+ type="range"
4
+ min={{this.min}}
5
+ max={{this.max}}
6
+ value="5"
7
+ aria-label="slide"
8
+ >
9
+ <div class="mdc-slider__track">
10
+ <div class="mdc-slider__track--inactive"></div>
11
+ <div class="mdc-slider__track--active">
12
+ <div class="mdc-slider__track--active_fill"></div>
13
+ </div>
3
14
  </div>
4
- <div class="mdc-slider__thumb-container">
15
+ <div class="mdc-slider__thumb">
16
+ {{#if @discrete}}
17
+ <div class="mdc-slider__value-indicator-container" aria-hidden="true">
18
+ <div class="mdc-slider__value-indicator">
19
+ <span class="mdc-slider__value-indicator-text">{{this.value}}</span>
20
+ </div>
21
+ </div>
22
+ {{/if}}
23
+ <div class="mdc-slider__thumb-knob"></div>
24
+ </div>
25
+ {{!-- <div class="mdc-slider__thumb-container">
5
26
  {{#if @discrete}}
6
27
  <div class="mdc-slider__pin">
7
28
  <span class="mdc-slider__pin-value-marker"></span>
@@ -10,5 +31,4 @@
10
31
  <svg class="mdc-slider__thumb" width="21" height="21">
11
32
  <circle cx="10.5" cy="10.5" r="7.875"></circle>
12
33
  </svg>
13
- <div class="mdc-slider__focus-ring"></div>
14
- </div>
34
+ </div> --}}
@@ -1,18 +1,22 @@
1
- <div class="mdc-switch">
1
+ <button id="basic-switch" class="mdc-switch mdc-switch--unselected" type="button" role="switch" aria-checked="false">
2
2
  <div class="mdc-switch__track"></div>
3
- <div class="mdc-switch__thumb-underlay">
4
- <div class="mdc-switch__thumb">
5
- <Input
6
- class="mdc-switch__native-control"
7
- @type="checkbox"
8
- @id={{this.switchId}}
9
- role="switch"
10
- checked={{@checked}}
11
- disabled={{@disabled}}
12
- />
3
+ <div class="mdc-switch__handle-track">
4
+ <div class="mdc-switch__handle">
5
+ <div class="mdc-switch__shadow">
6
+ <div class="mdc-elevation-overlay"></div>
7
+ </div>
8
+ <div class="mdc-switch__ripple"></div>
9
+ <div class="mdc-switch__icons">
10
+ <svg class="mdc-switch__icon mdc-switch__icon--on" viewBox="0 0 24 24">
11
+ <path d="M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z" />
12
+ </svg>
13
+ <svg class="mdc-switch__icon mdc-switch__icon--off" viewBox="0 0 24 24">
14
+ <path d="M20 13H4v-2h16v2z" />
15
+ </svg>
16
+ </div>
13
17
  </div>
14
18
  </div>
15
- </div>
19
+ </button>
16
20
 
17
21
  {{#if @label}}
18
22
  <label for={{this.switchId}}>{{@label}}</label>
@@ -14,7 +14,7 @@ $xep-bubble-font-size: 0.65rem;
14
14
 
15
15
  &--floating {
16
16
  position: absolute;
17
- top: -#{$xep-bubble-font-size / 2};
18
- right: -#{$xep-bubble-font-size / 2};
17
+ top: -#{calc($xep-bubble-font-size / 2)};
18
+ right: -#{calc($xep-bubble-font-size / 2)};
19
19
  }
20
20
  }
@@ -1,9 +1,11 @@
1
+ @use 'sass:math';
2
+
1
3
  /// Remove the unit of a length
2
4
  /// @param {Number} $number - Number to remove unit from
3
5
  /// @return {Number} - Unitless number
4
6
  @function strip-unit($number) {
5
7
  @if type-of($number) == 'number' and not unitless($number) {
6
- @return $number / ($number * 0 + 1);
8
+ @return math.div($number, ($number * 0 + 1));
7
9
  }
8
10
 
9
11
  @return $number;
@@ -5,9 +5,9 @@
5
5
  @import "@material/typography/mdc-typography";
6
6
  @import "@material/button/mdc-button";
7
7
  @import "@material/textfield/mdc-text-field";
8
- @import "@material/textfield/helper-text/mdc-text-field-helper-text";
9
- @import "@material/list/mdc-list";
10
- @import "@material/slider/mdc-slider";
8
+ @import "@material/textfield/helper-text";
9
+ @import "@material/list";
10
+ @import "@material/slider/styles";
11
11
  @import "@material/dialog/mdc-dialog";
12
12
  @import "@material/drawer/mdc-drawer";
13
13
  @import "@material/menu-surface/mdc-menu-surface";
@@ -15,8 +15,8 @@
15
15
  @import "@material/form-field/mdc-form-field";
16
16
  @import "@material/checkbox/mdc-checkbox";
17
17
  @import "@material/radio/mdc-radio";
18
- @import "@material/switch/mdc-switch";
19
- @import "@material/chips/mdc-chips";
18
+ @import "@material/switch/styles";
19
+ @import "@material/chips/styles";
20
20
  @import "@material/snackbar/mdc-snackbar";
21
21
  @import "@material/animation/variables";
22
22
  @import 'ember-partials/components/xep-avatar';
package/package.json CHANGED
@@ -1,129 +1,129 @@
1
- {
2
- "name": "@xdam/ember-partials",
3
- "version": "1.1.1",
4
- "description": "Xdam Ember Partials https://xdam.github.io/ember-partials/versions/development/",
5
- "keywords": [
6
- "ember-addon"
7
- ],
8
- "publishConfig": {
9
- "access": "public"
10
- },
11
- "repository": {
12
- "type": "git",
13
- "url": "https://github.com/XDAM/ember-partials.git"
14
- },
15
- "license": "MIT",
16
- "author": "",
17
- "directories": {
18
- "doc": "doc",
19
- "test": "tests"
20
- },
21
- "scripts": {
22
- "build": "ember build --environment=production",
23
- "lint:js": "eslint .",
24
- "start": "ember serve --port 4300",
25
- "lint": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*",
26
- "lint:hbs": "ember-template-lint .",
27
- "lint:scss": "stylelint app/styles/**/*",
28
- "test": "npm-run-all lint:* test:*",
29
- "test:ember": "ember test",
30
- "test:ember-compatibility": "ember try:each",
31
- "test:coverage": "cross-env COVERAGE=true ember test",
32
- "test:auto": "ember exam --test-port 7359 --server --launch Chrome",
33
- "test:backstop": "backstop test",
34
- "test:backstop:approve": "backstop approve",
35
- "test:backstop:reference": "backstop reference",
36
- "release": "ember release --minor && ember deploy production"
37
- },
38
- "dependencies": {
39
- "@material/animation": "0.41.0",
40
- "@material/button": "0.44.0",
41
- "@material/checkbox": "0.44.0",
42
- "@material/chips": "0.44.0",
43
- "@material/dialog": "0.44.0",
44
- "@material/dom": "0.41.0",
45
- "@material/drawer": "0.44.0",
46
- "@material/form-field": "0.44.0",
47
- "@material/list": "0.44.0",
48
- "@material/menu": "0.44.0",
49
- "@material/menu-surface": "0.44.0",
50
- "@material/radio": "0.44.0",
51
- "@material/slider": "0.44.0",
52
- "@material/snackbar": "0.44.0",
53
- "@material/switch": "0.44.0",
54
- "@material/textfield": "0.44.0",
55
- "@material/typography": "0.44.0",
56
- "babel-plugin-transform-object-rest-spread": "6.26.0",
57
- "broccoli-funnel": "3.0.8",
58
- "broccoli-merge-trees": "4.2.0",
59
- "ember-auto-import": "^1.6.0",
60
- "ember-classic-decorator": "2.0.1",
61
- "ember-cli-babel": "^7.21.0",
62
- "ember-cli-htmlbars": "^5.2.0",
63
- "ember-cli-sass": "11.0.1",
64
- "ember-composable-helpers": "5.0.0",
65
- "ember-decorators": "^6.1.0",
66
- "ember-truth-helpers": "2.1.0",
67
- "resize-observer-polyfill": "1.5.1",
68
- "sass": "1.60.0"
69
- },
70
- "devDependencies": {
71
- "@ember/optional-features": "^1.3.0",
72
- "@glimmer/component": "^1.0.1",
73
- "@glimmer/tracking": "^1.0.0",
74
- "babel-eslint": "^10.1.0",
75
- "backstopjs": "3.8.5",
76
- "broccoli-asset-rev": "^3.0.0",
77
- "ember-cli": "~3.20.2",
78
- "ember-cli-addon-docs": "0.8.0",
79
- "ember-cli-addon-docs-yuidoc": "0.2.3",
80
- "ember-cli-code-coverage": "1.0.3",
81
- "ember-cli-content-security-policy": "2.0.3",
82
- "ember-cli-dependency-checker": "^3.2.0",
83
- "ember-cli-deploy": "1.0.2",
84
- "ember-cli-deploy-build": "2.0.0",
85
- "ember-cli-deploy-git": "1.3.4",
86
- "ember-cli-deploy-git-ci": "1.0.1",
87
- "ember-cli-inject-live-reload": "^2.0.2",
88
- "ember-cli-release": "1.0.0-beta.2",
89
- "ember-cli-sri": "^2.1.1",
90
- "ember-cli-string-helpers": "6.1.0",
91
- "ember-cli-uglify": "^3.0.0",
92
- "ember-data": "3.15.0",
93
- "ember-decorators-polyfill": "^1.1.5",
94
- "ember-disable-prototype-extensions": "^1.1.3",
95
- "ember-exam": "5.0.1",
96
- "ember-export-application-global": "^2.0.1",
97
- "ember-fetch": "6.7.2",
98
- "ember-lifeline": "5.1.0",
99
- "ember-load-initializers": "^2.1.1",
100
- "ember-maybe-import-regenerator": "0.1.6",
101
- "ember-qunit": "^4.6.0",
102
- "ember-resolver": "^8.0.0",
103
- "ember-source": "~3.20.2",
104
- "ember-source-channel-url": "^2.0.1",
105
- "ember-template-lint": "2.21.0",
106
- "ember-try": "^1.4.0",
107
- "eslint": "^7.5.0",
108
- "eslint-config-airbnb-base": "13.1.0",
109
- "eslint-plugin-ember": "^8.9.1",
110
- "eslint-plugin-import": "^2.27.5",
111
- "eslint-plugin-node": "^11.1.0",
112
- "loader.js": "^4.7.0",
113
- "lodash": "4.17.21",
114
- "npm-run-all": "^4.1.5",
115
- "qunit-dom": "^1.2.0",
116
- "stylelint": "9.9.0",
117
- "stylelint-scss": "3.5.1"
118
- },
119
- "engines": {
120
- "node": "10.* || >= 12"
121
- },
122
- "ember": {
123
- "edition": "octane"
124
- },
125
- "ember-addon": {
126
- "configPath": "tests/dummy/config"
127
- },
128
- "homepage": "https://XDAM.github.io/ember-partials"
129
- }
1
+ {
2
+ "name": "@xdam/ember-partials",
3
+ "version": "2.0.0",
4
+ "description": "Xdam Ember Partials https://xdam.github.io/ember-partials/versions/development/",
5
+ "keywords": [
6
+ "ember-addon"
7
+ ],
8
+ "publishConfig": {
9
+ "access": "public"
10
+ },
11
+ "repository": {
12
+ "type": "git",
13
+ "url": "https://github.com/XDAM/ember-partials.git"
14
+ },
15
+ "license": "MIT",
16
+ "author": "",
17
+ "directories": {
18
+ "doc": "doc",
19
+ "test": "tests"
20
+ },
21
+ "scripts": {
22
+ "build": "ember build --environment=production",
23
+ "lint:js": "eslint .",
24
+ "start": "ember serve --port 4300",
25
+ "lint": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*",
26
+ "lint:hbs": "ember-template-lint .",
27
+ "lint:scss": "stylelint app/styles/**/*",
28
+ "test": "npm-run-all lint:* test:*",
29
+ "test:ember": "ember test",
30
+ "test:ember-compatibility": "ember try:each",
31
+ "test:coverage": "cross-env COVERAGE=true ember test",
32
+ "test:auto": "ember exam --test-port 7359 --server --launch Chrome",
33
+ "test:backstop": "backstop test",
34
+ "test:backstop:approve": "backstop approve",
35
+ "test:backstop:reference": "backstop reference",
36
+ "release": "ember release --minor && ember deploy production"
37
+ },
38
+ "dependencies": {
39
+ "@material/animation": "14.0.0",
40
+ "@material/button": "14.0.0",
41
+ "@material/checkbox": "14.0.0",
42
+ "@material/chips": "14.0.0",
43
+ "@material/dialog": "14.0.0",
44
+ "@material/dom": "14.0.0",
45
+ "@material/drawer": "14.0.0",
46
+ "@material/form-field": "14.0.0",
47
+ "@material/list": "14.0.0",
48
+ "@material/menu": "14.0.0",
49
+ "@material/menu-surface": "14.0.0",
50
+ "@material/radio": "14.0.0",
51
+ "@material/slider": "14.0.0",
52
+ "@material/snackbar": "14.0.0",
53
+ "@material/switch": "14.0.0",
54
+ "@material/textfield": "14.0.0",
55
+ "@material/typography": "14.0.0",
56
+ "babel-plugin-transform-object-rest-spread": "6.26.0",
57
+ "broccoli-funnel": "3.0.8",
58
+ "broccoli-merge-trees": "4.2.0",
59
+ "ember-auto-import": "^1.6.0",
60
+ "ember-classic-decorator": "2.0.1",
61
+ "ember-cli-babel": "^7.21.0",
62
+ "ember-cli-htmlbars": "^5.2.0",
63
+ "ember-cli-sass": "11.0.1",
64
+ "ember-composable-helpers": "5.0.0",
65
+ "ember-decorators": "^6.1.0",
66
+ "ember-truth-helpers": "2.1.0",
67
+ "resize-observer-polyfill": "1.5.1",
68
+ "sass": "1.60.0"
69
+ },
70
+ "devDependencies": {
71
+ "@ember/optional-features": "^1.3.0",
72
+ "@glimmer/component": "^1.0.1",
73
+ "@glimmer/tracking": "^1.0.0",
74
+ "babel-eslint": "^10.1.0",
75
+ "backstopjs": "3.8.5",
76
+ "broccoli-asset-rev": "^3.0.0",
77
+ "ember-cli": "~3.20.2",
78
+ "ember-cli-addon-docs": "3.0.0",
79
+ "ember-cli-addon-docs-yuidoc": "1.0.0",
80
+ "ember-cli-code-coverage": "1.0.3",
81
+ "ember-cli-content-security-policy": "2.0.3",
82
+ "ember-cli-dependency-checker": "^3.2.0",
83
+ "ember-cli-deploy": "1.0.2",
84
+ "ember-cli-deploy-build": "2.0.0",
85
+ "ember-cli-deploy-git": "1.3.4",
86
+ "ember-cli-deploy-git-ci": "1.0.1",
87
+ "ember-cli-inject-live-reload": "^2.0.2",
88
+ "ember-cli-release": "1.0.0-beta.2",
89
+ "ember-cli-sri": "^2.1.1",
90
+ "ember-cli-string-helpers": "6.1.0",
91
+ "ember-cli-uglify": "^3.0.0",
92
+ "ember-data": "3.15.0",
93
+ "ember-decorators-polyfill": "^1.1.5",
94
+ "ember-disable-prototype-extensions": "^1.1.3",
95
+ "ember-exam": "5.0.1",
96
+ "ember-export-application-global": "^2.0.1",
97
+ "ember-fetch": "6.7.2",
98
+ "ember-lifeline": "5.1.0",
99
+ "ember-load-initializers": "^2.1.1",
100
+ "ember-maybe-import-regenerator": "0.1.6",
101
+ "ember-qunit": "^4.6.0",
102
+ "ember-resolver": "^8.0.0",
103
+ "ember-source": "~3.20.2",
104
+ "ember-source-channel-url": "^2.0.1",
105
+ "ember-template-lint": "2.21.0",
106
+ "ember-try": "^1.4.0",
107
+ "eslint": "^7.5.0",
108
+ "eslint-config-airbnb-base": "13.1.0",
109
+ "eslint-plugin-ember": "^8.9.1",
110
+ "eslint-plugin-import": "^2.27.5",
111
+ "eslint-plugin-node": "^11.1.0",
112
+ "loader.js": "^4.7.0",
113
+ "lodash": "4.17.21",
114
+ "npm-run-all": "^4.1.5",
115
+ "qunit-dom": "^1.2.0",
116
+ "stylelint": "9.9.0",
117
+ "stylelint-scss": "3.5.1"
118
+ },
119
+ "engines": {
120
+ "node": "10.* || >= 12"
121
+ },
122
+ "ember": {
123
+ "edition": "octane"
124
+ },
125
+ "ember-addon": {
126
+ "configPath": "tests/dummy/config"
127
+ },
128
+ "homepage": "https://XDAM.github.io/ember-partials"
129
+ }