diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md index 5c272d77f9..c9bc3a92a9 100644 --- a/.github/ISSUE_TEMPLATE.md +++ b/.github/ISSUE_TEMPLATE.md @@ -1,5 +1,5 @@ **Ionic version:** (check one with "x") -[ ] **1.x** +[ ] **1.x** (For Ionic 1.x issues, please use https://github.com/driftyco/ionic-v1) [ ] **2.x** [ ] **3.x** @@ -17,9 +17,9 @@ **Steps to reproduce:** **Related code:** diff --git a/CHANGELOG.md b/CHANGELOG.md index 1dc30ddaf3..b77a52d33e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,55 @@ + +# [3.3.0](https://github.com/driftyco/ionic/compare/v3.2.1...v3.3.0) (2017-05-24) + + +### Steps to Upgrade + +`ionic-angular` now supports the latest `@angular` (4.1.2), and `typescript` (2.3.3) versions. Feel free to update apps by updating the `package.json` dependencies to match below: + +``` +"dependencies": { + "@angular/common": "4.1.2", + "@angular/compiler": "4.1.2", + "@angular/compiler-cli": "4.1.2", + "@angular/core": "4.1.2", + "@angular/forms": "4.1.2", + "@angular/http": "4.1.2", + "@angular/platform-browser": "4.1.2", + "@angular/platform-browser-dynamic": "4.1.2", + "@ionic-native/core": "3.10.2", + "@ionic-native/splash-screen": "3.10.2", + "@ionic-native/status-bar": "3.10.2", + "@ionic/storage": "2.0.1", + "ionic-angular": "3.3.0", + "ionicons": "3.0.0", + "rxjs": "5.1.1", + "sw-toolbox": "3.6.0", + "zone.js": "0.8.11" +}, +"devDependencies": { + "@ionic/app-scripts": "1.3.7", + "typescript": "2.3.3" +} +``` + +Another optional step is to remove the `src/declarations.d.ts` file. This is a legacy file introduced early with `ionic-angular` projects to improve compatibility between TypeScript and third-party libraries. Due to improvements in TypeScript, this file is no longer necessary. By removing this file, the TypeScript compiler will be able to provide more accurate error messages for `import` statements. + +### Bug Fixes + +* **range:** update the UI when min/max change ([#11720](https://github.com/driftyco/ionic/issues/11720)) ([d86785c](https://github.com/driftyco/ionic/commit/d86785c)), closes [#11719](https://github.com/driftyco/ionic/issues/11719) +* **searchbar:** searchbar padding should be on the left ([#11651](https://github.com/driftyco/ionic/issues/11651)) ([3443ffd](https://github.com/driftyco/ionic/commit/3443ffd)) +* **segment:** add z-index to ios back button ([#10363](https://github.com/driftyco/ionic/issues/10363)) ([bb22e4a](https://github.com/driftyco/ionic/commit/bb22e4a)) +* **select:** RTL fix for searchbar ([#11355](https://github.com/driftyco/ionic/issues/11355)) ([ca71072](https://github.com/driftyco/ionic/commit/ca71072)) +* **VirtualScroll:** initialize trackByFn reference ([#11624](https://github.com/driftyco/ionic/issues/11624)) ([892e14f](https://github.com/driftyco/ionic/commit/892e14f)) + + +### Features + +* **icon:** add flip/unflip for icon on rtl ([#11634](https://github.com/driftyco/ionic/issues/11634)) ([7bdfaac](https://github.com/driftyco/ionic/commit/7bdfaac)) +* **rtl:** add rtl margin, padding, position and border-radius ([#11342](https://github.com/driftyco/ionic/issues/11342)) ([a30379b](https://github.com/driftyco/ionic/commit/a30379b)) + + + ## [3.2.1](https://github.com/driftyco/ionic/compare/v3.2.0...v3.2.1) (2017-05-12) diff --git a/README.md b/README.md index 2d8b75e70d..60b9428cf4 100644 --- a/README.md +++ b/README.md @@ -3,19 +3,19 @@ # Ionic -[Ionic](http://ionicframework.com/) is the open-source mobile app development framework that makes it easy to +[Ionic](https://ionicframework.com/) is the open-source mobile app development framework that makes it easy to build top quality native and progressive web apps with web technologies. Ionic is based on [Angular](https://angular.io/) and comes with many significant performance, usability, and feature improvements over the past versions. -See the [Building Apps with Ionic](http://adamdbradley.github.io/building-with-ionic2) slides for a quick +See the [Building Apps with Ionic](https://adamdbradley.github.io/building-with-ionic2) slides for a quick overview or watch our [Crash Course](https://youtu.be/O2WiI9QrS5s) video for a quick walkthrough on how to get started using Ionic. ### Getting Started -Start a new project by following our quick [Getting Started guide](http://ionicframework.com/getting-started/). +Start a new project by following our quick [Getting Started guide](https://ionicframework.com/getting-started/). We would love to hear from you! If you have any feedback or run into issues using our framework, please file an [issue](https://github.com/driftyco/ionic/issues/new) on this repository. @@ -31,7 +31,7 @@ label. The [Ionic Conference App](https://github.com/driftyco/ionic-conference-app) is a full featured Ionic app. It is the perfect starting point for learning and building your own app. -### Ionic 1.x +### Ionic V1 -The source code for Ionic 1.x has been moved to [driftyco/ionic-v1](https://github.com/driftyco/ionic-v1). -Please open any issues and pull requests related to Ionic 1.x on that repository. +The source code for Ionic V1 has been moved to [driftyco/ionic-v1](https://github.com/driftyco/ionic-v1). +Please open any issues and pull requests related to Ionic V1 on that repository. diff --git a/package.json b/package.json index da6265a11b..cf642d2dec 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "ionic2", - "version": "3.2.1", + "version": "3.3.0", "description": "A powerful framework for building mobile and progressive web apps with JavaScript and Angular 2", "keywords": [ "ionic", @@ -25,14 +25,14 @@ "link": "gulp release.prepareReleasePackage && cd dist/ionic-angular && npm link" }, "dependencies": { - "@angular/common": "4.1.0", - "@angular/compiler": "4.1.0", - "@angular/compiler-cli": "4.1.0", - "@angular/core": "4.1.0", - "@angular/forms": "4.1.0", - "@angular/http": "4.1.0", - "@angular/platform-browser": "4.1.0", - "@angular/platform-browser-dynamic": "4.1.0", + "@angular/common": "4.1.2", + "@angular/compiler": "4.1.2", + "@angular/compiler-cli": "4.1.2", + "@angular/core": "4.1.2", + "@angular/forms": "4.1.2", + "@angular/http": "4.1.2", + "@angular/platform-browser": "4.1.2", + "@angular/platform-browser-dynamic": "4.1.2", "ionicons": "~3.0.0", "rxjs": "5.1.1", "zone.js": "^0.8.10" @@ -146,4 +146,4 @@ "pre-push#master": [ "test" ] -} \ No newline at end of file +} diff --git a/scripts/gulp/util.ts b/scripts/gulp/util.ts index 8045708e8d..44ff714791 100644 --- a/scripts/gulp/util.ts +++ b/scripts/gulp/util.ts @@ -203,8 +203,7 @@ export function runAppScriptsServe(testOrDemoName: string, appEntryPoint: string '--ionicAngularDir', ionicAngularDir, '--sass', sassConfigPath, '--copy', copyConfigPath, - '--enableLint', 'false', - '--bonjour' + '--enableLint', 'false' ]; if (watchConfigPath) { diff --git a/src/components/alert/alert.md.scss b/src/components/alert/alert.md.scss index dde56b5b61..37cfb9d762 100644 --- a/src/components/alert/alert.md.scss +++ b/src/components/alert/alert.md.scss @@ -117,7 +117,7 @@ $alert-md-input-margin-bottom: 5px !default; // deprecated $alert-md-input-margin-left: 0 !default; /// @prop - Margin start of the alert input -$alert-md-input-margin-start: $alert-md-input-margin-left; +$alert-md-input-margin-start: $alert-md-input-margin-left !default; /// @prop - Flex wrap of the alert button group $alert-md-button-group-flex-wrap: wrap-reverse !default; diff --git a/src/components/card/card.ios.scss b/src/components/card/card.ios.scss index 3202a17f73..84b217cf49 100644 --- a/src/components/card/card.ios.scss +++ b/src/components/card/card.ios.scss @@ -17,7 +17,7 @@ $card-ios-margin-bottom: 12px !default; // deprecated $card-ios-margin-left: 12px !default; /// @prop - Margin start of the card -$card-ios-margin-start: $card-ios-margin-left; +$card-ios-margin-start: $card-ios-margin-left !default; /// @prop - Padding top of the card $card-ios-padding-top: 13px !default; @@ -25,7 +25,7 @@ $card-ios-padding-top: 13px !default; // deprecated $card-ios-padding-right: 16px !default; /// @prop - Padding end of the card -$card-ios-padding-end: $card-ios-padding-right; +$card-ios-padding-end: $card-ios-padding-right !default; /// @prop - Padding bottom of the card $card-ios-padding-bottom: 14px !default; @@ -33,7 +33,7 @@ $card-ios-padding-bottom: 14px !default; // deprecated $card-ios-padding-left: 16px !default; /// @prop - Padding start of the card -$card-ios-padding-start: $card-ios-padding-left; +$card-ios-padding-start: $card-ios-padding-left !default; /// @prop - Padding top of the media on the card $card-ios-padding-media-top: 10px !default; diff --git a/src/components/card/card.md.scss b/src/components/card/card.md.scss index ae439b80b1..6018f8c8f5 100644 --- a/src/components/card/card.md.scss +++ b/src/components/card/card.md.scss @@ -17,7 +17,7 @@ $card-md-margin-bottom: 10px !default; // deprecated $card-md-margin-left: 10px !default; /// @prop - Margin start of the card -$card-md-margin-start: $card-md-margin-left; +$card-md-margin-start: $card-md-margin-left !default; /// @prop - Padding top of the card @@ -26,7 +26,7 @@ $card-md-padding-top: 13px !default; // deprecated $card-md-padding-right: 16px !default; /// @prop - Padding right of the card -$card-md-padding-end: $card-md-padding-right; +$card-md-padding-end: $card-md-padding-right !default; /// @prop - Padding bottom of the card $card-md-padding-bottom: 13px !default; @@ -34,7 +34,7 @@ $card-md-padding-bottom: 13px !default; // deprecated $card-md-padding-left: 16px !default; /// @prop - Padding start of the card -$card-md-padding-start: $card-md-padding-left; +$card-md-padding-start: $card-md-padding-left !default; /// @prop - Padding top of the media on the card $card-md-padding-media-top: 10px !default; diff --git a/src/components/card/card.wp.scss b/src/components/card/card.wp.scss index 120423d4a9..8cf0dbe881 100644 --- a/src/components/card/card.wp.scss +++ b/src/components/card/card.wp.scss @@ -17,7 +17,7 @@ $card-wp-margin-bottom: 8px !default; // deprecated $card-wp-margin-left: 8px !default; /// @prop - Margin start of the card -$card-wp-margin-start: $card-wp-margin-left; +$card-wp-margin-start: $card-wp-margin-left !default; /// @prop - Padding top of the card $card-wp-padding-top: 13px !default; @@ -25,7 +25,7 @@ $card-wp-padding-top: 13px !default; // deprecated $card-wp-padding-right: 16px !default; /// @prop - Padding end of the card -$card-wp-padding-end: $card-wp-padding-right; +$card-wp-padding-end: $card-wp-padding-right !default; /// @prop - Padding bottom of the card $card-wp-padding-bottom: 13px !default; @@ -33,7 +33,7 @@ $card-wp-padding-bottom: 13px !default; // deprecated $card-wp-padding-left: 16px !default; /// @prop - Padding start of the card -$card-wp-padding-start: $card-wp-padding-left; +$card-wp-padding-start: $card-wp-padding-left !default; /// @prop - Padding top of the media on the card $card-wp-padding-media-top: 10px !default; diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts index 86377f4c0c..ef3bb9086e 100644 --- a/src/components/checkbox/checkbox.ts +++ b/src/components/checkbox/checkbox.ts @@ -42,6 +42,34 @@ import { Item } from '../item/item'; * * ``` * + * @advanced + * + * ```html + * + * + * + * + * + * Cucumber + * + * + * + * + * ``` + * + * ```ts + * @Component({ + * templateUrl: 'main.html' + * }) + * class SaladPage { + * cucumber: boolean; + * + * updateCucumber() { + * console.log("Cucumbers new state:" + this.cucumber); + * } + * } + * ``` + * * @demo /docs/demos/src/checkbox/ * @see {@link /docs/components#checkbox Checkbox Component Docs} */ diff --git a/src/components/datetime/datetime.ios.scss b/src/components/datetime/datetime.ios.scss index 726e711f01..86dde7e532 100644 --- a/src/components/datetime/datetime.ios.scss +++ b/src/components/datetime/datetime.ios.scss @@ -9,7 +9,7 @@ $datetime-ios-padding-top: $item-ios-padding-top !default; // deprecated $datetime-ios-padding-right: ($item-ios-padding-end / 2) !default; /// @prop - Padding end of the DateTime component -$datetime-ios-padding-end: $datetime-ios-padding-right; +$datetime-ios-padding-end: $datetime-ios-padding-right !default; /// @prop - Padding bottom of the DateTime component $datetime-ios-padding-bottom: $item-ios-padding-bottom !default; @@ -17,7 +17,7 @@ $datetime-ios-padding-bottom: $item-ios-padding-bottom !default; // deprecated $datetime-ios-padding-left: $item-ios-padding-start !default; /// @prop - Padding start of the DateTime component -$datetime-ios-padding-start: $datetime-ios-padding-left; +$datetime-ios-padding-start: $datetime-ios-padding-left !default; /// @prop - Color of the DateTime placeholder $datetime-ios-placeholder-color: #999 !default; diff --git a/src/components/datetime/datetime.md.scss b/src/components/datetime/datetime.md.scss index 9f2162ee3e..313951764e 100644 --- a/src/components/datetime/datetime.md.scss +++ b/src/components/datetime/datetime.md.scss @@ -9,7 +9,7 @@ $datetime-md-padding-top: $item-md-padding-top !default; // deprecated $datetime-md-padding-right: ($item-md-padding-end / 2) !default; /// @prop - Padding end of the DateTime component -$datetime-md-padding-end: $datetime-md-padding-right; +$datetime-md-padding-end: $datetime-md-padding-right !default; /// @prop - Padding bottom of the DateTime component $datetime-md-padding-bottom: $item-md-padding-bottom !default; @@ -17,7 +17,7 @@ $datetime-md-padding-bottom: $item-md-padding-bottom !default; // deprecated $datetime-md-padding-left: $item-md-padding-start !default; /// @prop - Padding start of the DateTime component -$datetime-md-padding-start: $datetime-md-padding-left; +$datetime-md-padding-start: $datetime-md-padding-left !default; /// @prop - Color of the DateTime placeholder $datetime-md-placeholder-color: #999 !default; diff --git a/src/components/datetime/datetime.wp.scss b/src/components/datetime/datetime.wp.scss index 72164592e6..d2f0b975ed 100644 --- a/src/components/datetime/datetime.wp.scss +++ b/src/components/datetime/datetime.wp.scss @@ -12,7 +12,7 @@ $datetime-wp-padding-top: $item-wp-padding-top !default; // deprecated $datetime-wp-padding-right: ($item-wp-padding-end / 2) !default; /// @prop - Padding end of the DateTime component -$datetime-wp-padding-end: $datetime-wp-padding-right; +$datetime-wp-padding-end: $datetime-wp-padding-right !default; /// @prop - Padding bottom of the DateTime component $datetime-wp-padding-bottom: $item-wp-padding-bottom !default; @@ -20,7 +20,7 @@ $datetime-wp-padding-bottom: $item-wp-padding-bottom !default; // deprecated $datetime-wp-padding-left: $item-wp-padding-start !default; /// @prop - Padding start of the DateTime component -$datetime-wp-padding-start: $datetime-wp-padding-left; +$datetime-wp-padding-start: $datetime-wp-padding-left !default; /// @prop - Border width of the DateTime component $datetime-wp-border-width: 2px !default; diff --git a/src/components/input/input.ios.scss b/src/components/input/input.ios.scss index 65a77007c7..1c895d7a7e 100644 --- a/src/components/input/input.ios.scss +++ b/src/components/input/input.ios.scss @@ -20,7 +20,7 @@ $text-input-ios-margin-bottom: $item-ios-padding-bottom !default; // deprecated $text-input-ios-margin-left: 0 !default; /// @prop - Margin start of the input -$text-input-ios-margin-start: $text-input-ios-margin-left; +$text-input-ios-margin-start: $text-input-ios-margin-left !default; /// @prop - Width of the icon used to clear the input $text-input-ios-input-clear-icon-width: 30px !default; @@ -85,12 +85,17 @@ $text-input-ios-highlight-color-invalid: $text-input-highlight-color-invalid ! @if ($text-input-ios-show-focus-highlight) { // In order to get a 2px border we need to add an inset // box-shadow 1px (this is to avoid the div resizing) + + // TODO remove all uses of input-has-focus in v4 + // TODO remove all uses of input-has-value in v4 + .item-ios.item-input.item-input-has-focus .item-inner, .item-ios.item-input.input-has-focus .item-inner { @include ios-input-highlight($text-input-ios-highlight-color); } // The last item in a list has a border on the item, not the // inner item, so add it to the item itself + .list-ios .item-input.item-input-has-focus:last-child, .list-ios .item-input.input-has-focus:last-child { @include ios-input-highlight($text-input-ios-highlight-color); @@ -102,11 +107,13 @@ $text-input-ios-highlight-color-invalid: $text-input-highlight-color-invalid ! // Show the valid highlight when it has the .ng-valid class and a value @if ($text-input-ios-show-valid-highlight) { - .item-ios.item-input.ng-valid.input-has-value:not(.input-has-focus) .item-inner { + .item-ios.item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner, + .item-ios.item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner { @include ios-input-highlight($text-input-ios-highlight-color-valid); } - .list-ios .item-input.ng-valid.input-has-value:not(.input-has-focus):last-child { + .list-ios .item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child, + .list-ios .item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child { @include ios-input-highlight($text-input-ios-highlight-color-valid); .item-inner { @@ -117,11 +124,11 @@ $text-input-ios-highlight-color-invalid: $text-input-highlight-color-invalid ! // Show the invalid highlight when it has the invalid class and has been touched @if ($text-input-ios-show-invalid-highlight) { - .item-ios.item-input.ng-invalid.ng-touched:not(.input-has-focus) .item-inner { + .item-ios.item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus) .item-inner { @include ios-input-highlight($text-input-ios-highlight-color-invalid); } - .list-ios .item-input.ng-invalid.ng-touched:not(.input-has-focus):last-child { + .list-ios .item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus):last-child { @include ios-input-highlight($text-input-ios-highlight-color-invalid); .item-inner { diff --git a/src/components/input/input.md.scss b/src/components/input/input.md.scss index 96a5cce965..6a414a1091 100644 --- a/src/components/input/input.md.scss +++ b/src/components/input/input.md.scss @@ -86,12 +86,16 @@ $text-input-md-highlight-color-invalid: $text-input-highlight-color-invalid @if ($text-input-md-show-focus-highlight) { // In order to get a 2px border we need to add an inset // box-shadow 1px (this is to avoid the div resizing) + + // TODO remove all uses of input-has-focus in v4 + .item-md.item-input.item-input-has-focus .item-inner, .item-md.item-input.input-has-focus .item-inner { @include md-input-highlight($text-input-md-highlight-color); } // The last item in a list has a border on the item, not the // inner item, so add it to the item itself + .list-md .item-input.item-input-has-focus:last-child, .list-md .item-input.input-has-focus:last-child { @include md-input-highlight($text-input-md-highlight-color); @@ -103,11 +107,15 @@ $text-input-md-highlight-color-invalid: $text-input-highlight-color-invalid // Show the valid highlight when it has the .ng-valid class and a value @if ($text-input-md-show-valid-highlight) { - .item-md.item-input.ng-valid.input-has-value:not(.input-has-focus) .item-inner { + // TODO remove all uses of input-has-focus in v4 + // TODO remove all uses of input-has-value in v4 + .item-md.item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner, + .item-md.item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner { @include md-input-highlight($text-input-md-highlight-color-valid); } - .list-md .item-input.ng-valid.input-has-value:not(.input-has-focus):last-child { + .list-md .item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child, + .list-md .item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child { @include md-input-highlight($text-input-md-highlight-color-valid); .item-inner { @@ -118,11 +126,11 @@ $text-input-md-highlight-color-invalid: $text-input-highlight-color-invalid // Show the invalid highlight when it has the invalid class and has been touched @if ($text-input-md-show-invalid-highlight) { - .item-md.item-input.ng-invalid.ng-touched:not(.input-has-focus) .item-inner { + .item-md.item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus) .item-inner { @include md-input-highlight($text-input-md-highlight-color-invalid); } - .list-md .item-input.ng-invalid.ng-touched:not(.input-has-focus):last-child { + .list-md .item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus):last-child { @include md-input-highlight($text-input-md-highlight-color-invalid); .item-inner { diff --git a/src/components/input/input.scss b/src/components/input/input.scss index e9220087a6..a2ec0987a1 100644 --- a/src/components/input/input.scss +++ b/src/components/input/input.scss @@ -104,17 +104,24 @@ input.text-input:-webkit-autofill { // -------------------------------------------------- // When the input has focus, then the input cover should be hidden +// TODO remove all uses of input-has-focus in v4 +.item-input-has-focus .input-cover, .input-has-focus .input-cover { display: none; } +.item-input-has-focus, .input-has-focus { pointer-events: none; } +.item-input-has-focus input, .input-has-focus input, +.item-input-has-focus textarea, .input-has-focus textarea, +.item-input-has-focus a, .input-has-focus a, +.item-input-has-focus button, .input-has-focus button { pointer-events: auto; } @@ -158,6 +165,9 @@ input.text-input:-webkit-autofill { background-position: center; } +// TODO remove all uses of input-has-focus in v4 +// TODO remove all uses of input-has-value in v4 +.item-input-has-focus.item-input-has-value .text-input-clear-icon, .input-has-focus.input-has-value .text-input-clear-icon { display: block; } diff --git a/src/components/input/input.ts b/src/components/input/input.ts index d6bbe6c8a1..f3f7980d77 100644 --- a/src/components/input/input.ts +++ b/src/components/input/input.ts @@ -607,7 +607,9 @@ export class TextInput extends Ion implements IonicFormInput { checkHasValue(inputValue: any) { if (this._item) { var hasValue = (inputValue !== null && inputValue !== undefined && inputValue !== ''); + // TODO remove all uses of input-has-value in v4 this._item.setElementClass('input-has-value', hasValue); + this._item.setElementClass('item-input-has-value', hasValue); } } @@ -617,7 +619,9 @@ export class TextInput extends Ion implements IonicFormInput { focusChange(inputHasFocus: boolean) { if (this._item) { console.debug(`input-base, focusChange, inputHasFocus: ${inputHasFocus}, ${this._item.getNativeElement().nodeName}.${this._item.getNativeElement().className}`); + // TODO remove input-has-focus for v4 this._item.setElementClass('input-has-focus', inputHasFocus); + this._item.setElementClass('item-input-has-focus', inputHasFocus); } // If clearOnEdit is enabled and the input blurred but has a value, set a flag diff --git a/src/components/input/input.wp.scss b/src/components/input/input.wp.scss index ae523688a5..5d862920c4 100644 --- a/src/components/input/input.wp.scss +++ b/src/components/input/input.wp.scss @@ -96,6 +96,9 @@ $text-input-wp-highlight-color-invalid: $text-input-highlight-color-invalid // Show the focus highlight when the input has focus @if ($text-input-wp-show-focus-highlight) { + // TODO remove all uses of input-has-focus in v4 + // TODO remove all uses of input-has-value in v4 + .item-wp.item-input.item-input-has-focus .text-input, .item-wp.item-input.input-has-focus .text-input { border-color: $text-input-wp-highlight-color; } @@ -103,14 +106,15 @@ $text-input-wp-highlight-color-invalid: $text-input-highlight-color-invalid // Show the valid highlight when it has the .ng-valid class and a value @if ($text-input-wp-show-valid-highlight) { - .item-wp.item-input.ng-valid.input-has-value:not(.input-has-focus) .text-input { + .item-wp.item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus) .text-input, + .item-wp.item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus) .text-input { border-color: $text-input-wp-highlight-color-valid; } } // Show the invalid highlight when it has the invalid class and has been touched @if ($text-input-wp-show-invalid-highlight) { - .item-wp.item-input.ng-invalid.ng-touched:not(.input-has-focus) .text-input { + .item-wp.item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus) .text-input { border-color: $text-input-wp-highlight-color-invalid; } } diff --git a/src/components/label/label.ios.scss b/src/components/label/label.ios.scss index 55070678f9..17a506e5fd 100644 --- a/src/components/label/label.ios.scss +++ b/src/components/label/label.ios.scss @@ -77,7 +77,11 @@ $label-ios-margin-start: 0 !default; transform-origin: right top; } +// TODO remove all uses of input-has-focus in v4 +// TODO remove all uses of input-has-value in v4 +.item-input-has-focus .label-ios[floating], .input-has-focus .label-ios[floating], +.item-input-has-value .label-ios[floating], .input-has-value .label-ios[floating] { transform: translate3d(0, 0, 0) scale(.8); } @@ -90,7 +94,9 @@ $label-ios-margin-start: 0 !default; margin-bottom: $item-ios-padding-media-bottom - 2; } +.item-input-has-focus .label-ios[stacked], .input-has-focus .label-ios[stacked], +.item-input-has-focus .label-ios[floating], .input-has-focus .label-ios[floating] { color: $label-ios-text-color-focused; } diff --git a/src/components/label/label.md.scss b/src/components/label/label.md.scss index 487f9f4c64..df0889732b 100644 --- a/src/components/label/label.md.scss +++ b/src/components/label/label.md.scss @@ -70,12 +70,18 @@ $label-md-margin-start: 0 !default; @include margin(null, null, 0, 0); } +// TODO remove all uses of input-has-focus in v4 +// TODO remove all uses of input-has-value in v4 +.item-input-has-focus .label-md[stacked], .input-has-focus .label-md[stacked], +.item-input-has-focus .label-md[floating], .input-has-focus .label-md[floating] { color: $label-md-text-color-focused; } +.item-input-has-focus .label-md[floating], .input-has-focus .label-md[floating], +.item-input-has-value .label-md[floating], .input-has-value .label-md[floating] { transform: translate3d(0, 0, 0) scale(.8); } diff --git a/src/components/label/label.wp.scss b/src/components/label/label.wp.scss index f70148b842..6c4b26bb85 100644 --- a/src/components/label/label.wp.scss +++ b/src/components/label/label.wp.scss @@ -50,12 +50,18 @@ $label-wp-text-color-focused: color($colors-wp, primary) !default; @include margin(null, null, 0, 0); } +// TODO remove all uses of input-has-focus in v4 +// TODO remove all uses of input-has-value in v4 +.item-input-has-focus .label-wp[stacked], .input-has-focus .label-wp[stacked], +.item-input-has-focus .label-wp[floating], .input-has-focus .label-wp[floating] { color: $label-wp-text-color-focused; } +.item-input-has-focus .label-wp[floating], .input-has-focus .label-wp[floating], +.item-input-has-value .label-wp[floating], .input-has-value .label-wp[floating] { transform: translate3d(0, 0, 0) scale(.8); } diff --git a/src/components/list/list.ios.scss b/src/components/list/list.ios.scss index 447f818599..60c9a39319 100644 --- a/src/components/list/list.ios.scss +++ b/src/components/list/list.ios.scss @@ -41,7 +41,7 @@ $list-inset-ios-border-radius: 4px !default; // deprecated $list-ios-header-padding-left: $item-ios-padding-start !default; /// @prop - Padding start of the header in a list -$list-ios-header-padding-start: $list-ios-header-padding-left; +$list-ios-header-padding-start: $list-ios-header-padding-left !default; /// @prop - Border bottom of the header in a list $list-ios-header-border-bottom: $hairlines-width solid $list-ios-border-color !default; diff --git a/src/components/list/list.md.scss b/src/components/list/list.md.scss index 5df74f11f4..013a8f3486 100644 --- a/src/components/list/list.md.scss +++ b/src/components/list/list.md.scss @@ -44,7 +44,7 @@ $list-md-header-margin-bottom: 13px !default; // deprecated $list-md-header-padding-left: $item-md-padding-start !default; /// @prop - Padding start of the header in a list -$list-md-header-padding-start: $list-md-header-padding-left; +$list-md-header-padding-start: $list-md-header-padding-left !default; /// @prop - Minimum height of the header in a list $list-md-header-min-height: 4.5rem !default; diff --git a/src/components/list/list.wp.scss b/src/components/list/list.wp.scss index 6214bf1d47..772ae92ece 100644 --- a/src/components/list/list.wp.scss +++ b/src/components/list/list.wp.scss @@ -41,7 +41,7 @@ $list-inset-wp-border-radius: 2px !default; // deprecated $list-wp-header-padding-left: $item-wp-padding-start !default; /// @prop - Padding start of the header in a list -$list-wp-header-padding-start: $list-wp-header-padding-left; +$list-wp-header-padding-start: $list-wp-header-padding-left !default; /// @prop - Border bottom of the header in a list $list-wp-header-border-bottom: 1px solid $list-wp-border-color !default; diff --git a/src/components/loading/loading-options.ts b/src/components/loading/loading-options.ts index 3e2713e743..f3f5711568 100644 --- a/src/components/loading/loading-options.ts +++ b/src/components/loading/loading-options.ts @@ -5,6 +5,5 @@ export interface LoadingOptions { cssClass?: string; showBackdrop?: boolean; dismissOnPageChange?: boolean; - delay?: number; duration?: number; } diff --git a/src/components/menu/menu.ts b/src/components/menu/menu.ts index af0f706d6c..b896e88077 100644 --- a/src/components/menu/menu.ts +++ b/src/components/menu/menu.ts @@ -25,7 +25,7 @@ import { RootNode } from '../split-pane/split-pane'; * will be displayed differently based on the mode, however the display type can be changed * to any of the available [menu types](#menu-types). The menu element should be a sibling * to the app's content element. There can be any number of menus attached to the content. - * These can be controlled from the templates, or programmatically using the [MenuController](../MenuController). + * These can be controlled from the templates, or programmatically using the [MenuController](../app/MenuController). * * @usage * @@ -170,14 +170,14 @@ import { RootNode } from '../split-pane/split-pane'; * } * ``` * - * See the [MenuController](../MenuController) API docs for all of the methods + * See the [MenuController](../../app/MenuController) API docs for all of the methods * and usage information. * * * @demo /docs/demos/src/menu/ * * @see {@link /docs/components#menus Menu Component Docs} - * @see {@link ../MenuController MenuController API Docs} + * @see {@link ../../app/MenuController MenuController API Docs} * @see {@link ../../nav/Nav Nav API Docs} * @see {@link ../../nav/NavController NavController API Docs} */ diff --git a/src/components/modal/modal-controller.ts b/src/components/modal/modal-controller.ts index 0cdad09968..d047189025 100644 --- a/src/components/modal/modal-controller.ts +++ b/src/components/modal/modal-controller.ts @@ -65,6 +65,7 @@ import { DeepLinker } from '../../navigation/deep-linker'; * |-----------------------|------------|------------------------------------------------------------------------------------------------------------------| * | showBackdrop |`boolean` | Whether to show the backdrop. Default true. | * | enableBackdropDismiss |`boolean` | Whether the popover should be dismissed by tapping the backdrop. Default true. | + * | cssClass |`string` | Additional classes for custom styles, separated by spaces. | * * A modal can also emit data, which is useful when it is used to add or edit * data. For example, a profile page could slide up in a modal, and on submit, diff --git a/src/components/range/range.ts b/src/components/range/range.ts index ea4dd6b8db..9389619168 100644 --- a/src/components/range/range.ts +++ b/src/components/range/range.ts @@ -146,6 +146,7 @@ export class Range extends BaseInput implements AfterContentInit, ControlVa val = Math.round(val); if (!isNaN(val)) { this._min = val; + this._inputUpdated(); } } @@ -160,6 +161,7 @@ export class Range extends BaseInput implements AfterContentInit, ControlVa val = Math.round(val); if (!isNaN(val)) { this._max = val; + this._inputUpdated(); } } diff --git a/src/components/range/test/basic/pages/root-page/root-page.html b/src/components/range/test/basic/pages/root-page/root-page.html index 042873e29e..1c982b62b8 100644 --- a/src/components/range/test/basic/pages/root-page/root-page.html +++ b/src/components/range/test/basic/pages/root-page/root-page.html @@ -92,6 +92,14 @@ + + dynamic min and max + + + + + + dual, pin, {{dualValue | json}} @@ -117,4 +125,4 @@ - \ No newline at end of file + diff --git a/src/components/range/test/basic/pages/root-page/root-page.ts b/src/components/range/test/basic/pages/root-page/root-page.ts index 426f243947..dddfe16990 100644 --- a/src/components/range/test/basic/pages/root-page/root-page.ts +++ b/src/components/range/test/basic/pages/root-page/root-page.ts @@ -10,9 +10,13 @@ export class RootPage { singleValue2: number = 150; singleValue3: number = 64; singleValue4: number = 1300; + singleValue5: number = 0; dualValue: any; dualValue2 = {lower: 33, upper: 60}; + min: number = -50; + max: number = 50; + rangeCtrl = new FormControl({value: '66', disabled: true}); dualRangeCtrl = new FormControl({value: {lower: 33, upper: 60}, disabled: true}); diff --git a/src/components/searchbar/searchbar.ios.scss b/src/components/searchbar/searchbar.ios.scss index a0babeacaa..0afc207879 100644 --- a/src/components/searchbar/searchbar.ios.scss +++ b/src/components/searchbar/searchbar.ios.scss @@ -139,7 +139,7 @@ $searchbar-ios-toolbar-input-background: rgba(0, 0, 0, .08) !default; // ----------------------------------------- .searchbar-ios .searchbar-ios-cancel { - @include padding(0, 8px, 0, 0); + @include padding(0, 0, 0, 8px); @include margin-horizontal(0, null); display: none; diff --git a/src/components/searchbar/searchbar.ts b/src/components/searchbar/searchbar.ts index 47a83c7c07..fce18b0c18 100644 --- a/src/components/searchbar/searchbar.ts +++ b/src/components/searchbar/searchbar.ts @@ -188,7 +188,9 @@ export class Searchbar extends BaseInput { */ _inputUpdated() { const ele = this._searchbarInput.nativeElement; - if (ele) { + // It is important not to re-assign the value if it is the same, because, + // otherwise, the caret is moved to the end of the input + if (ele && ele.value !== this.value) { ele.value = this.value; } this.positionElements(); @@ -238,11 +240,19 @@ export class Searchbar extends BaseInput { // Set the input padding start var inputLeft = 'calc(50% - ' + (textWidth / 2) + 'px)'; - inputEle.style.paddingLeft = inputLeft; + if (this._plt.isRTL) { + inputEle.style.paddingRight = inputLeft; + } else { + inputEle.style.paddingLeft = inputLeft; + } // Set the icon margin start var iconLeft = 'calc(50% - ' + ((textWidth / 2) + 30) + 'px)'; - iconEle.style.marginLeft = iconLeft; + if (this._plt.isRTL) { + iconEle.style.marginRight = iconLeft; + } else { + iconEle.style.marginLeft = iconLeft; + } } } @@ -257,11 +267,19 @@ export class Searchbar extends BaseInput { var cancelStyle = cancelStyleEle.style; this._isCancelVisible = showShowCancel; if (showShowCancel) { - cancelStyle.marginRight = '0'; + if (this._plt.isRTL) { + cancelStyle.marginLeft = '0'; + } else { + cancelStyle.marginRight = '0'; + } } else { var offset = cancelStyleEle.offsetWidth; if (offset > 0) { - cancelStyle.marginRight = -offset + 'px'; + if (this._plt.isRTL) { + cancelStyle.marginLeft = -offset + 'px'; + } else { + cancelStyle.marginRight = -offset + 'px'; + } } } } diff --git a/src/components/segment/segment.ts b/src/components/segment/segment.ts index 0af6e4805d..3fc253b2ea 100644 --- a/src/components/segment/segment.ts +++ b/src/components/segment/segment.ts @@ -31,11 +31,11 @@ import { SegmentButton } from './segment-button'; * * * - * - * + * + * * Friends * - * + * * Enemies * * diff --git a/src/components/select/select.ios.scss b/src/components/select/select.ios.scss index 893b71b36e..5b98d71ddd 100644 --- a/src/components/select/select.ios.scss +++ b/src/components/select/select.ios.scss @@ -9,7 +9,7 @@ $select-ios-padding-top: $item-ios-padding-top !default; // deprecated $select-ios-padding-right: ($item-ios-padding-end / 2) !default; /// @prop - Padding end of the select -$select-ios-padding-end: $select-ios-padding-right; +$select-ios-padding-end: $select-ios-padding-right !default; /// @prop - Padding bottom of the select $select-ios-padding-bottom: $item-ios-padding-bottom !default; @@ -17,7 +17,7 @@ $select-ios-padding-bottom: $item-ios-padding-bottom !default; // deprecated $select-ios-padding-left: $item-ios-padding-start !default; /// @prop - Padding start of the select -$select-ios-padding-start: $select-ios-padding-left; +$select-ios-padding-start: $select-ios-padding-left !default; /// @prop - Color of the select icon $select-ios-icon-color: #999 !default; diff --git a/src/components/select/select.md.scss b/src/components/select/select.md.scss index 39e176a123..325327cbad 100644 --- a/src/components/select/select.md.scss +++ b/src/components/select/select.md.scss @@ -9,7 +9,7 @@ $select-md-padding-top: $item-md-padding-top !default; // deprecated $select-md-padding-right: ($item-md-padding-end / 2) !default; /// @prop - Padding end of the select -$select-md-padding-end: $select-md-padding-right; +$select-md-padding-end: $select-md-padding-right !default; /// @prop - Padding bottom of the select $select-md-padding-bottom: $item-md-padding-bottom !default; @@ -17,7 +17,7 @@ $select-md-padding-bottom: $item-md-padding-bottom !default; // deprecated $select-md-padding-left: $item-md-padding-start !default; /// @prop - Padding start of the select -$select-md-padding-start: $select-md-padding-left; +$select-md-padding-start: $select-md-padding-left !default; /// @prop - Color of the select icon $select-md-icon-color: #999 !default; diff --git a/src/components/slides/swiper/swiper.ts b/src/components/slides/swiper/swiper.ts index a1cbdaa1f8..bc8c7beae9 100644 --- a/src/components/slides/swiper/swiper.ts +++ b/src/components/slides/swiper/swiper.ts @@ -897,9 +897,10 @@ function cleanupStyles(s: Slides) { } // Container - removeClass(s.container, s._classNames); - s.container.removeAttribute('style'); - + if (s.container) { + removeClass(s.container, s._classNames); + s.container.removeAttribute('style'); + } // Wrapper s._wrapper.removeAttribute('style'); diff --git a/src/components/toolbar/toolbar.ios.scss b/src/components/toolbar/toolbar.ios.scss index 60aab685e6..e46f59feaf 100644 --- a/src/components/toolbar/toolbar.ios.scss +++ b/src/components/toolbar/toolbar.ios.scss @@ -315,6 +315,7 @@ $toolbar-button-ios-strong-font-weight: 600 !default; .back-button-ios { @include margin(0); + z-index: 99; overflow: visible; order: map-get($toolbar-order-ios, back-button); diff --git a/src/components/toolbar/toolbar.ts b/src/components/toolbar/toolbar.ts index 80b7f03040..6141b28fd9 100644 --- a/src/components/toolbar/toolbar.ts +++ b/src/components/toolbar/toolbar.ts @@ -8,7 +8,7 @@ import { ToolbarBase } from './toolbar-base'; * @name Toolbar * @description * A Toolbar is a generic bar that is positioned above or below content. - * Unlike a [Navbar](../../navbar/Navbar), a toolbar can be used as a subheader. + * Unlike a [Navbar](../Navbar/), a toolbar can be used as a subheader. * When toolbars are placed within an `` or ``, * the toolbars stay fixed in their respective location. When placed within * ``, toolbars will scroll with the content. @@ -90,7 +90,7 @@ import { ToolbarBase } from './toolbar-base'; * ``` * * @demo /docs/demos/src/toolbar/ - * @see {@link ../../navbar/Navbar/ Navbar API Docs} + * @see {@link ../Navbar/ Navbar API Docs} */ @Component({ selector: 'ion-toolbar', diff --git a/src/components/virtual-scroll/virtual-scroll.ts b/src/components/virtual-scroll/virtual-scroll.ts index 805ff0c6c4..88bf65ba80 100644 --- a/src/components/virtual-scroll/virtual-scroll.ts +++ b/src/components/virtual-scroll/virtual-scroll.ts @@ -4,7 +4,7 @@ import { adjustRendered, calcDimensions, estimateHeight, initReadNodes, processR import { Config } from '../../config/config'; import { Content, ScrollEvent } from '../content/content'; import { DomController } from '../../platform/dom-controller'; -import { isBlank, isFunction, isPresent, assert } from '../../util/util'; +import { isFunction, isPresent, assert } from '../../util/util'; import { Platform } from '../../platform/platform'; import { ViewController } from '../../navigation/view-controller'; import { VirtualCell, VirtualData, VirtualNode } from './virtual-util'; @@ -528,7 +528,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy { } private _updateDiffer() { - if (isBlank(this._differ) && isPresent(this._records)) { + if (isPresent(this._records)) { this._differ = this._iterableDiffers.find(this._records).create(this._virtualTrackBy); } } diff --git a/src/fonts/ionicons.scss b/src/fonts/ionicons.scss index dc8e92c386..436a309139 100644 --- a/src/fonts/ionicons.scss +++ b/src/fonts/ionicons.scss @@ -32,4 +32,19 @@ ion-icon { text-rendering: auto; text-transform: none; speak: none; + + @include rtl() { + &[aria-label^="arrow"]::before, + &[flip-rtl]::before { + transform: scaleX(-1); + } + + &[unflip-rtl]::before { + transform: scaleX(1); + } + } + + &::before { + display: inline-block; + } } diff --git a/src/navigation/nav-params.ts b/src/navigation/nav-params.ts index ba6474854f..01116bb6bf 100644 --- a/src/navigation/nav-params.ts +++ b/src/navigation/nav-params.ts @@ -8,9 +8,9 @@ * @usage * ```ts * export class MyClass{ - * constructor(public params: NavParams){ + * constructor(public navParams: NavParams){ * // userParams is an object we have in our nav-parameters - * this.params.get('userParams'); + * this.navParams.get('userParams'); * } * } * ``` @@ -33,9 +33,9 @@ export class NavParams { * * ```ts * export class MyClass{ - * constructor(public params: NavParams){ + * constructor(public navParams: NavParams){ * // userParams is an object we have in our nav-parameters - * this.params.get('userParams'); + * this.navParams.get('userParams'); * } * } * ``` diff --git a/src/themes/ionic.theme.dark.ios.scss b/src/themes/ionic.theme.dark.ios.scss index b2eb14bbc4..9ead8aa26f 100644 --- a/src/themes/ionic.theme.dark.ios.scss +++ b/src/themes/ionic.theme.dark.ios.scss @@ -71,11 +71,11 @@ $item-ios-divider-color: $text-color !default; $item-ios-padding-top: 11px !default; // deprecated $item-ios-padding-right: 16px !default; -$item-ios-padding-end: $item-ios-padding-right; +$item-ios-padding-end: $item-ios-padding-right !default; $item-ios-padding-bottom: 11px !default; // deprecated $item-ios-padding-left: 16px !default; -$item-ios-padding-start: $item-ios-padding-left; +$item-ios-padding-start: $item-ios-padding-left !default; $item-ios-padding-media-top: 10px !default; $item-ios-padding-media-bottom: 10px !default; $item-ios-padding-icon-top: 9px !default; diff --git a/src/themes/ionic.theme.dark.md.scss b/src/themes/ionic.theme.dark.md.scss index acaa2d3881..ad655b397e 100644 --- a/src/themes/ionic.theme.dark.md.scss +++ b/src/themes/ionic.theme.dark.md.scss @@ -60,11 +60,11 @@ $list-md-activated-background-color: #d9d9d9 !default; $item-md-padding-top: 13px !default; // deprecated $item-md-padding-right: 16px !default; -$item-md-padding-end: $item-md-padding-right; +$item-md-padding-end: $item-md-padding-right !default; $item-md-padding-bottom: 13px !default; // deprecated $item-md-padding-left: 16px !default; -$item-md-padding-start: $item-md-padding-left; +$item-md-padding-start: $item-md-padding-left !default; $item-md-padding-media-top: 9px !default; $item-md-padding-media-bottom: 9px !default; $item-md-padding-icon-top: 11px !default; diff --git a/src/themes/ionic.theme.dark.wp.scss b/src/themes/ionic.theme.dark.wp.scss index 9cd8876f52..481e191721 100644 --- a/src/themes/ionic.theme.dark.wp.scss +++ b/src/themes/ionic.theme.dark.wp.scss @@ -61,11 +61,11 @@ $list-wp-activated-background-color: #d9d9d9 !default; $item-wp-padding-top: 13px !default; // deprecated $item-wp-padding-right: 16px !default; -$item-wp-padding-end: $item-wp-padding-right; +$item-wp-padding-end: $item-wp-padding-right !default; $item-wp-padding-bottom: 13px !default; // deprecated $item-wp-padding-left: 16px !default; -$item-wp-padding-start: $item-wp-padding-left; +$item-wp-padding-start: $item-wp-padding-left !default; $item-wp-padding-media-top: 9px !default; $item-wp-padding-media-bottom: 9px !default; $item-wp-padding-icon-top: 11px !default; diff --git a/src/themes/ionic.theme.default.ios.scss b/src/themes/ionic.theme.default.ios.scss index af9cc1d8fa..abb2659536 100644 --- a/src/themes/ionic.theme.default.ios.scss +++ b/src/themes/ionic.theme.default.ios.scss @@ -53,11 +53,11 @@ $list-ios-activated-background-color: #d9d9d9 !default; $item-ios-padding-top: 11px !default; // deprecated $item-ios-padding-right: 16px !default; -$item-ios-padding-end: $item-ios-padding-right; +$item-ios-padding-end: $item-ios-padding-right !default; $item-ios-padding-bottom: 11px !default; // deprecated $item-ios-padding-left: 16px !default; -$item-ios-padding-start: $item-ios-padding-left; +$item-ios-padding-start: $item-ios-padding-left !default; $item-ios-padding-media-top: 8px !default; $item-ios-padding-media-bottom: 8px !default; $item-ios-padding-icon-top: 9px !default; diff --git a/src/themes/ionic.theme.default.md.scss b/src/themes/ionic.theme.default.md.scss index 3a839202a7..b4328184c2 100644 --- a/src/themes/ionic.theme.default.md.scss +++ b/src/themes/ionic.theme.default.md.scss @@ -52,11 +52,11 @@ $list-md-activated-background-color: #f1f1f1 !default; $item-md-padding-top: 13px !default; // deprecated $item-md-padding-right: 16px !default; -$item-md-padding-end: $item-md-padding-right; +$item-md-padding-end: $item-md-padding-right !default; $item-md-padding-bottom: 13px !default; // deprecated $item-md-padding-left: 16px !default; -$item-md-padding-start: $item-md-padding-left; +$item-md-padding-start: $item-md-padding-left !default; $item-md-padding-media-top: 9px !default; $item-md-padding-media-bottom: 9px !default; $item-md-padding-icon-top: 11px !default; diff --git a/src/themes/ionic.theme.default.wp.scss b/src/themes/ionic.theme.default.wp.scss index 8cf8ac7254..1f243360b1 100644 --- a/src/themes/ionic.theme.default.wp.scss +++ b/src/themes/ionic.theme.default.wp.scss @@ -53,11 +53,11 @@ $list-wp-activated-background-color: #aaa !default; $item-wp-padding-top: 13px !default; // deprecated $item-wp-padding-right: 16px !default; -$item-wp-padding-end: $item-wp-padding-right; +$item-wp-padding-end: $item-wp-padding-right !default; $item-wp-padding-bottom: 13px !default; // deprecated $item-wp-padding-left: 16px !default; -$item-wp-padding-start: $item-wp-padding-left; +$item-wp-padding-start: $item-wp-padding-left !default; $item-wp-padding-media-top: 9px !default; $item-wp-padding-media-bottom: 9px !default; $item-wp-padding-icon-top: 11px !default; diff --git a/src/util/base-input.ts b/src/util/base-input.ts index 64cb70d4e3..164c63c972 100644 --- a/src/util/base-input.ts +++ b/src/util/base-input.ts @@ -282,7 +282,9 @@ export class BaseInput extends Ion implements CommonInput { if (!this._item) { return; } + // TODO remove all uses of input-has-value in v4 this._item.setElementClass('input-has-value', this.hasValue()); + this._item.setElementClass('item-input-has-value', this.hasValue()); } /**