diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..8908b9e
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,8 @@
+{
+ "printWidth": 100,
+ "singleQuote": true,
+ "useTabs": false,
+ "tabWidth": 4,
+ "semi": true,
+ "bracketSpacing": true
+}
diff --git a/README.md b/README.md
index 9f43256..2c20bd8 100644
--- a/README.md
+++ b/README.md
@@ -32,7 +32,7 @@ npm i ngx-responsive@6.0.0 --save
npm i ngx-responsive@5.0.8 --save
```
-- Branch : [ngx-responsive@5.0.8](https://github.com/ManuCutillas/ngx-responsive/tree/v5.0.8)
+- Branch : [ngx-responsive@5.0.8](https://github.com/ManuCutillas/ngx-responsive/tree/v5.0.8)
### If you use Angular 4 in your project use ng2-responsive.
@@ -40,360 +40,377 @@ npm i ngx-responsive@5.0.8 --save
npm i ng2-responsive --save
```
-- Branch : [ng2-responsive](https://github.com/ManuCutillas/ngx-responsive/tree/v4.0.1)
+- Branch : [ng2-responsive](https://github.com/ManuCutillas/ngx-responsive/tree/v4.0.1)
`RESPONSIVE_DIRECTIVES` provides the following features:
-- Directives detecting states according to standard measures in BOOTSTRAP: xs / sm / md / lg / xl
-- Directives that detect four states according to the real type of device: mobile / tablet / desktop / smartTv
-- Custom sizes detector.
-- Show and hide options.
-- Custom breaking points.
-- Debounce checking interval (default 100ms).
-- Browsers Detect: Chrome / Safari / Firefox / IE / Opera
-- Internet Explorer Versions Detect : IE 9 / IE 10 / IE 11 / IE +12
-- New standard devices: iPhone, iPad, Android Mobile, Android Tablet, Windows Phone.
-- Device orientation detect: portrait, landscape.
-- Directives Info: DeviceInfo, OrientationInfo, ResponsiveSizeInfo, DeviceStandardInfo, BrowserInfo, IeInfo.
-- Directive: responsive - Detection of multiple functions at once.
-- Feature Responsive Directive - Boolean Events Emitter on change state:
-- Feature responsive-window : Capture the size of the parent element to show or hide fill elements. If the parent responsive size is x show or hide.
-- UserAgent information directive: Get te device, browser, os version and more from the user agent navigator in one event object.
-- **New Feature :** Reactive services that expose changes through observables:
- - BrowserInfoRx
- - IeInfoRx
- - DeviceInfoRx
- - DeviceStandardInfoRx
- - OrientationInfoRx
- - ResponsiveSizeInfoRx
- - UserAgentInfoRx
+- Directives detecting states according to standard measures in BOOTSTRAP: xs / sm / md / lg / xl
+- Directives that detect four states according to the real type of device: mobile / tablet / desktop / smartTv
+- Custom sizes detector.
+- Show and hide options.
+- Custom breaking points.
+- Debounce checking interval (default 100ms).
+- Browsers Detect: Chrome / Safari / Firefox / IE / Opera
+- Internet Explorer Versions Detect : IE 9 / IE 10 / IE 11 / IE +12
+- New standard devices: iPhone, iPad, Android Mobile, Android Tablet, Windows Phone.
+- Device orientation detect: portrait, landscape.
+- Directives Info: DeviceInfo, OrientationInfo, ResponsiveSizeInfo, DeviceStandardInfo, BrowserInfo, IeInfo.
+- Directive: responsive - Detection of multiple functions at once.
+- Feature Responsive Directive - Boolean Events Emitter on change state:
+- Feature responsive-window : Capture the size of the parent element to show or hide fill elements. If the parent responsive size is x show or hide.
+- UserAgent information directive: Get te device, browser, os version and more from the user agent navigator in one event object.
+- **New Feature :** Reactive services that expose changes through observables:
+ - BrowserInfoRx
+ - IeInfoRx
+ - DeviceInfoRx
+ - DeviceStandardInfoRx
+ - OrientationInfoRx
+ - ResponsiveSizeInfoRx
+ - UserAgentInfoRx
# How to start
#### 1. Installing the package via npm
- ```bash
- npm i ngx-responsive --save
- ```
+```bash
+npm i ngx-responsive --save
+```
+
#### 2. Bootstrap the service
- - #### With default breaking points
+- #### With default breaking points
+
+```typescript
+import { NgModule } from '@angular/core'
+import { ResponsiveModule } from 'ngx-responsive'
+...
+@NgModule({
+ imports: [
+ ResponsiveModule.forRoot()
+ ],
+ declarations: [
+ AppComponent
+ ],
+ providers:[]
+})
+export class AppModule { }
+```
+
+- #### With custom Configuration
- ```typescript
+```typescript
import { NgModule } from '@angular/core'
import { ResponsiveModule } from 'ngx-responsive'
...
- @NgModule({
- imports: [
- ResponsiveModule.forRoot()
- ],
- declarations: [
- AppComponent
- ],
- providers:[]
- })
- export class AppModule { }
- ```
-
- - #### With custom Configuration
-
- ```typescript
- import { NgModule } from '@angular/core'
- import { ResponsiveModule } from 'ngx-responsive'
- ...
- const config = {
- breakPoints: {
- xs: {max: 600},
- sm: {min: 601, max: 959},
- md: {min: 960, max: 1279},
- lg: {min: 1280, max: 1919},
- xl: {min: 1920}
- },
- debounceTime: 100
- };
- ...
- @NgModule({
- imports: [
- BrowserModule,
- ResponsiveModule.forRoot(config)
- ],
- declarations: [
- AppComponent
- ],
- providers:[]
- })
- export class AppModule { }
- ```
- #### 2.1 DIRECTIVES:
- In your component to import the RESPONSIVE_DIRECTIVES only need import:
- ```typescript
- @Component({
- selector: 'my-component',
- template: `
- I'll show you if I'm a iPhone or ipad device.
- I'll show you if I'm a iPhone device.
- I'll show you if I'm a chrome browser.
- I'll show you if I'm a xl screen size.
- I'll show you if I'm a lg screen size.
- I'll show you if I'm a md screen size.
- I'll show you if I'm a sm screen size.
- I'll show you if I'm a xs screen size.
- `
- })
- ```
+ const config = {
+ breakPoints: {
+ xs: {max: 600},
+ sm: {min: 601, max: 959},
+ md: {min: 960, max: 1279},
+ lg: {min: 1280, max: 1919},
+ xl: {min: 1920}
+ },
+ debounceTime: 100
+ };
+ ...
+@NgModule({
+ imports: [
+ BrowserModule,
+ ResponsiveModule.forRoot(config)
+ ],
+ declarations: [
+ AppComponent
+ ],
+ providers:[]
+})
+export class AppModule { }
+```
+
+#### 2.1 DIRECTIVES:
+
+In your component to import the RESPONSIVE_DIRECTIVES only need import:
+
+```typescript
+@Component({
+ selector: 'my-component',
+ template: `
+ I'll show you if I'm a iPhone or ipad device.
+ I'll show you if I'm a iPhone device.
+ I'll show you if I'm a chrome browser.
+ I'll show you if I'm a xl screen size.
+ I'll show you if I'm a lg screen size.
+ I'll show you if I'm a lg screen size or larger.
+ I'll show you if I'm a md screen size.
+ I'll show you if I'm a md screen size or larger.
+ I'll show you if I'm a sm screen size.
+ I'll show you if I'm a sm screen size or larger.
+ I'll show you if I'm a xs screen size.
+ `
+})
+```
#### 3. ALL RESPONSIVE DIRECTIVES OPTIONS
-- #### 3.1 Responsive Window directive.
- Capture the size of the parent element to show or hide fill elements. If the parent responsive size is x show or hide.
+- #### 3.1 Responsive Window directive.
+
+ Capture the size of the parent element to show or hide fill elements. If the parent responsive size is x show or hide.
- #### 3.1.1 First syntax
+ #### 3.1.1 First syntax
- Define a named parrent element, the reference is stored on the service and available outside of the current container. Name must be unique to avoid conflicts
+ Define a named parrent element, the reference is stored on the service and available outside of the current container. Name must be unique to avoid conflicts
- ```html
-
- ```
+ ```html
+
+ ```
- #### 3.1.2 Second syntax
+ #### 3.1.2 Second syntax
- Define a reference to the parent element
+ Define a reference to the parent element
- ```html
+ ```html
- ```
-
- Or:
-
- ```html
-
- ```
-
-- #### 3.2 New Detection of multiple functions at once.
-
- All combinations
-
- ```typescript
- *responsive="{
- bootstrap: ['xl','lg','md','sm','xs'],
- browser: ['chrome','firefox','ie','safari', 'opera'],
- ie:['ie 9','ie 10','ie 11','ie +12'],
- pixelratio:['1x','retina','4k'],
- standard:['iphone','ipad','android mobile','android tablet','windows phone'],
- orientation:['landscape','portrait'],
- device: ['mobile','tablet','smarttv','desktop'],
- sizes:{min:900,max:1400}
- }"
- ```
-
- \*Example in component
-
- ```typescript
- @Component({
- selector: 'my-component',
- template: `
- I'll show you if all the options are true.
-
- I'll show you if all the options are true & listen events changes.
- `
- })
- ```
-
-- #### 3.3 One function detect
-
- - #### With Bootstrap Screen sizes
-
- ```typescript
- @Component({
- selector: 'my-component',
- template: `
- I'll show you if I'm a xl screen size.
- I'll show you if I'm a lg screen size.
- I'll show you if I'm a md screen size.
- I'll show you if I'm a sm screen size.
- I'll show you if I'm a xs screen size.
- `
- })
- ```
+ ```
- - #### With multiple combinations of bootstrap screen sizes and show / hide options
- - #### Strings Multiple combinations = "['xs','sm','md','lg','xl']"
+ Or:
- ```typescript
- @Component({
- selector: 'my-component',
- template: `
- I'll show you only in md and xs screen sizes.
- I'll hide you only in lg and sm screen sizes.
- `
- })
- ```
-
- - #### With Devices Screen sizes
-
- ```typescript
- @Component({
- selector: 'my-component',
- template: `
- I'll show you if I'm a smartTv device.
- I'll show you if I'm a desktop device.
- I'll show you if I'm a tablet device.
- I'll show you if I'm a mobile device.
- `
- })
- ```
+ ```html
+
+ ```
- - #### With multiple devices detect combinations: show / hide options.
- - #### Strings Multiple combinations = "['mobile','tablet','smarttv','desktop']"
+- #### 3.2 New Detection of multiple functions at once.
- ```typescript
- @Component({
- selector: 'my-component',
- template: `
- I'll show you if I'm a tablet or a mobile device.
- I'll hide you if I'm a desktop / tablet or mobile device.
- `
- })
- ```
-
- - #### With Standard Devices detect
-
- ```typescript
- @Component({
- selector: 'my-component',
- template: `
- I'll show you if I'm a iPhone device.
- I'll show you if I'm a iPad device.
- I'll show you if I'm a android mobile device.
- I'll show you if I'm a android tablet device.
- I'll show you if I'm a windows phone mobile device.
- `
- })
- ```
-
- - #### With multiple devices detect combinations: show / hide options.
- - #### Strings Multiple combinations = "['iphone','ipad','android mobile','android tablet','windows phone']"
-
- ```typescript
- @Component({
- selector: 'my-component',
- template: `
- I'll show you if I'm a android mobile or a windows phone device.
- I'll hide you if I'm a iPad or a iPhone device.
- `
- })
- ```
+ All combinations
- - #### With orientation device
+ ```typescript
+ *responsive="{
+ bootstrap: ['xl','lg','md','sm','xs','lgUp','mdUp','smUp'],
+ browser: ['chrome','firefox','ie','safari', 'opera'],
+ ie:['ie 9','ie 10','ie 11','ie +12'],
+ pixelratio:['1x','retina','4k'],
+ standard:['iphone','ipad','android mobile','android tablet','windows phone'],
+ orientation:['landscape','portrait'],
+ device: ['mobile','tablet','smarttv','desktop'],
+ sizes:{min:900,max:1400}
+ }"
+ ```
- ```typescript
- @Component({
- selector: 'my-component',
- template: `
- I'll show you if I'm a portrait state.
- I'll show you if I'm a landscape state.
- `
- })
- ```
+ \*Example in component
- - #### With custom sizes and show / hide options
-
- ```typescript
- @Component({
- selector: 'my-component',
- template: `
- I'll show you if responsive-window width is between the min and max.
- I'll show you if responsive-window width is greater than or equal to min.
- It is hidden if responsive-window width between the min and max.
- `
+ ```typescript
+ @Component({
+ selector: 'my-component',
+ template: `
+ I'll show you if all the options are true.
+
+ I'll show you if all the options are true & listen events changes.
+ `
})
- ```
+ ```
- - #### Responsive-window being window by default or any element set using the Responsive Window directive.
+- #### 3.3 One function detect
- - #### With browser detection.
+ - #### With Bootstrap Screen sizes
- ```typescript
+ ```typescript
@Component({
- selector: 'my-component',
- template: `
- I'll show you if I'm a Chrome Browser.
- I'll show you if I'm a Firefox Browser.
- I'll show you if I'm a Safari Browser.
- I'll show you if I'm a Opera Browser.
- I'll show you if I'm a Internet Explorer Browser.
- `
- })
- ```
-
- - #### With multiple browsers detect combinations: show / hide options.
- - #### Strings Multiple combinations = "['chrome','firefox','ie','safari', 'opera']"
-
- ```typescript
- @Component({
- selector: 'my-component',
- template: `
- I'll show you if I'm a IE or Opera Browser.
- I'll hide you if I'm a Chrome, Firefox or Safari Browser.
- `
+ selector: 'my-component',
+ template: `
+ I'll show you if I'm a xl screen size.
+ I'll show you if I'm a lg screen size.
+ I'll show you if I'm a md screen size.
+ I'll show you if I'm a sm screen size.
+ I'll show you if I'm a xs screen size.
+ `
})
- ```
-
- - #### With Internet Explorer Version detection.
-
- ```typescript
- @Component({
- selector: 'my-component',
- template: `
- I'll show you if I'm a Internet Explorer 9.
- I'll show you if I'm a Internet Explorer 10.
- I'll show you if I'm a Internet Explorer 11.
- I'll show you if I'm a Internet Explorer 12.
- `
- })
- ```
-
- - #### With multiple Internet Explorer version detect: show / hide options.
- - #### Strings Multiple combinations = "['ie 9','ie 10','ie 11','ie +12']"
-
- ```typescript
- @Component({
- selector: 'my-component',
- template: `
- I'll show you if I'm a IE 11 browser or IE 12
- I'll hide you if I'm IE 9 browser or IE 10.
- `
- })
- ```
-
- - #### Get the userAgent info directive:
- Get the device, browser, os version and more from the user agent navigator in one event object.
-
- ```html
-
- ```
+ ```
+
+ - #### With multiple combinations of bootstrap screen sizes and show / hide options
+
+ - #### Strings Multiple combinations = "['xs','sm','md','lg','xl']"
+
+ ```typescript
+ @Component({
+ selector: 'my-component',
+ template: `
+ I'll show you only in md and xs screen sizes.
+ I'll hide you only in lg and sm screen sizes.
+ `
+ })
+ ```
+
+ - #### With Devices Screen sizes
+
+ ```typescript
+ @Component({
+ selector: 'my-component',
+ template: `
+ I'll show you if I'm a smartTv device.
+ I'll show you if I'm a desktop device.
+ I'll show you if I'm a tablet device.
+ I'll show you if I'm a mobile device.
+ `
+ })
+ ```
+
+ - #### With multiple devices detect combinations: show / hide options.
+
+ - #### Strings Multiple combinations = "['mobile','tablet','smarttv','desktop']"
+
+ ```typescript
+ @Component({
+ selector: 'my-component',
+ template: `
+ I'll show you if I'm a tablet or a mobile device.
+ I'll hide you if I'm a desktop / tablet or mobile device.
+ `
+ })
+ ```
+
+ - #### With Standard Devices detect
+
+ ```typescript
+ @Component({
+ selector: 'my-component',
+ template: `
+ I'll show you if I'm a iPhone device.
+ I'll show you if I'm a iPad device.
+ I'll show you if I'm a android mobile device.
+ I'll show you if I'm a android tablet device.
+ I'll show you if I'm a windows phone mobile device.
+ `
+ })
+ ```
+
+ - #### With multiple devices detect combinations: show / hide options.
+
+ - #### Strings Multiple combinations = "['iphone','ipad','android mobile','android tablet','windows phone']"
+
+ ```typescript
+ @Component({
+ selector: 'my-component',
+ template: `
+ I'll show you if I'm a android mobile or a windows phone device.
+ I'll hide you if I'm a iPad or a iPhone device.
+ `
+ })
+ ```
+
+ - #### With orientation device
+
+ ```typescript
+ @Component({
+ selector: 'my-component',
+ template: `
+ I'll show you if I'm a portrait state.
+ I'll show you if I'm a landscape state.
+ `
+ })
+ ```
+
+ - #### With custom sizes and show / hide options
+
+ ```typescript
+ @Component({
+ selector: 'my-component',
+ template: `
+ I'll show you if responsive-window width is between the min and max.
+ I'll show you if responsive-window width is greater than or equal to min.
+ It is hidden if responsive-window width between the min and max.
+ `
+ })
+ ```
+
+ - #### Responsive-window being window by default or any element set using the Responsive Window directive.
+
+ - #### With browser detection.
+
+ ```typescript
+ @Component({
+ selector: 'my-component',
+ template: `
+ I'll show you if I'm a Chrome Browser.
+ I'll show you if I'm a Firefox Browser.
+ I'll show you if I'm a Safari Browser.
+ I'll show you if I'm a Opera Browser.
+ I'll show you if I'm a Internet Explorer Browser.
+ `
+ })
+ ```
+
+ - #### With multiple browsers detect combinations: show / hide options.
+
+ - #### Strings Multiple combinations = "['chrome','firefox','ie','safari', 'opera']"
+
+ ```typescript
+ @Component({
+ selector: 'my-component',
+ template: `
+ I'll show you if I'm a IE or Opera Browser.
+ I'll hide you if I'm a Chrome, Firefox or Safari Browser.
+ `
+ })
+ ```
+
+ - #### With Internet Explorer Version detection.
+
+ ```typescript
+ @Component({
+ selector: 'my-component',
+ template: `
+ I'll show you if I'm a Internet Explorer 9.
+ I'll show you if I'm a Internet Explorer 10.
+ I'll show you if I'm a Internet Explorer 11.
+ I'll show you if I'm a Internet Explorer 12.
+ `
+ })
+ ```
+
+ - #### With multiple Internet Explorer version detect: show / hide options.
+
+ - #### Strings Multiple combinations = "['ie 9','ie 10','ie 11','ie +12']"
+
+ ```typescript
+ @Component({
+ selector: 'my-component',
+ template: `
+ I'll show you if I'm a IE 11 browser or IE 12
+ I'll hide you if I'm IE 9 browser or IE 10.
+ `
+ })
+ ```
+
+ - #### Get the userAgent info directive:
+
+ Get the device, browser, os version and more from the user agent navigator in one event object.
+
+ ```html
+
+ ```
#### 4. FORMAT OF USER AGENT INFO OBJECT
@@ -443,34 +460,35 @@ Description of the object given by the `(info)` event of the directive `user-age
# NEXT STEPS
-- Unit test and e2e.
-- Create a documentation page.
-- Work in demo page
-- Directive css classes:
+- Unit test and e2e.
+- Create a documentation page.
+- Work in demo page
+- Directive css classes:
```html
-
-
+}"
+>
```
-- animations show/hide in directives
+- animations show/hide in directives
# Contributors
-- Manu Cutillas
-- Christophe HOARAU
-- Kamil Breguła
-- Janne Julkunen
-- phransyz
-- Michael Burger
-- Alyssa Brunswick
-- Quentin
-- Thomas Christensen
-- lydemann
-- MattSenter
+- Manu Cutillas
+- Christophe HOARAU
+- Kamil Breguła
+- Janne Julkunen
+- phransyz
+- Michael Burger
+- Alyssa Brunswick
+- Quentin
+- Thomas Christensen
+- lydemann
+- MattSenter
# License
diff --git a/ng-package.json b/ng-package.json
index 26426e5..749ad46 100644
--- a/ng-package.json
+++ b/ng-package.json
@@ -1,8 +1,8 @@
{
"$schema": "./node_modules/ng-packagr/ng-package.schema.json",
- "name": "ngx-responsive",
+ "name": "@stefanski/ngx-responsive",
"version": "9.0.0",
"lib": {
"entryFile": "src/index.ts"
}
-}
\ No newline at end of file
+}
diff --git a/package.json b/package.json
index 4fae5ba..3d549e1 100644
--- a/package.json
+++ b/package.json
@@ -1,107 +1,107 @@
{
- "$schema": "./node_modules/ng-packagr/package.schema.json",
- "name": "ngx-responsive",
- "version": "9.0.3",
- "description": "Superset of RESPONSIVE DIRECTIVES to show or hide items according to the size of the device screen and another features in Angular 9",
- "scripts": {
- "start": "ng serve --aot",
- "build": "ng-packagr -p ng-package.json",
- "build:watch": "onchange -i -k 'src/**/*.ts' -- npm run build",
- "compodoc": "compodoc -p tsconfig.json",
- "compodoc:serve": "compodoc -s",
- "test": "ng test",
- "lint": "ng lint",
- "e2e": "ng e2e"
- },
- "ngPackage": {
- "lib": {
- "entryFile": "src/index.ts"
+ "$schema": "./node_modules/ng-packagr/package.schema.json",
+ "name": "@stefanski/ngx-responsive",
+ "version": "9.0.9",
+ "description": "Superset of RESPONSIVE DIRECTIVES to show or hide items according to the size of the device screen and another features in Angular 9",
+ "scripts": {
+ "start": "ng serve --aot",
+ "build": "ng-packagr -p ng-package.json",
+ "build:watch": "onchange -i -k 'src/**/*.ts' -- npm run build",
+ "compodoc": "compodoc -p tsconfig.json",
+ "compodoc:serve": "compodoc -s",
+ "test": "ng test",
+ "lint": "ng lint",
+ "e2e": "ng e2e"
+ },
+ "ngPackage": {
+ "lib": {
+ "entryFile": "src/index.ts"
+ }
+ },
+ "typings": "./index.d.ts",
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/schmidts306/ngx-responsive.git"
+ },
+ "keywords": [
+ "angular",
+ "angular2",
+ "angular4",
+ "angular5",
+ "angular6",
+ "angular7",
+ "angular8",
+ "angular9",
+ "angular10",
+ "ng2",
+ "ng",
+ "ngx",
+ "responsive",
+ "bootstrap",
+ "detect",
+ "mobile",
+ "tablet",
+ "useragent",
+ "devices",
+ "screen",
+ "typescript",
+ "directive",
+ "retina",
+ "browsers",
+ "universal",
+ "directives"
+ ],
+ "author": "Manu Cutillas ",
+ "contributors": [
+ "Christophe HOARAU (https://github.com/no-more)",
+ "Kamil Breguła (https://github.com/mik-laj)",
+ "Janne Julkunen (https://github.com/sconix)",
+ "paulyipkh (https://github.com/paulyipkh)",
+ "mburger81 (https://github.com/mburger81)",
+ "Alyssa Brunswick (https://github.com/alyssabrunswick)",
+ "Quentin (https://github.com/bobbybobby)",
+ "Thomas Christensen (https://github.com/tocDK)",
+ "Christian Lüdemann (https://github.com/lydemann)",
+ "Matt Senter (https://github.com/MattSenter)"
+ ],
+ "license": "MIT",
+ "bugs": {
+ "url": "https://github.com/ManuCutillas/ngx-responsive/issues"
+ },
+ "homepage": "https://github.com/ManuCutillas/ngx-responsive",
+ "private": false,
+ "peerDependencies": {
+ "@angular/common": "^9.1.6",
+ "@angular/core": "^9.1.6"
+ },
+ "devDependencies": {
+ "@angular/animations": "^9.1.6",
+ "@angular/cli": "^9.0.1",
+ "@angular/common": "^9.1.6",
+ "@angular/compiler": "^9.1.6",
+ "@angular/compiler-cli": "^9.1.6",
+ "@angular/core": "^9.1.6",
+ "@angular/language-service": "^9.1.6",
+ "@angular/platform-browser": "^9.1.6",
+ "@angular/platform-browser-dynamic": "^9.1.6",
+ "@angular/platform-server": "^9.1.6",
+ "@compodoc/compodoc": "1.1.11",
+ "@nguniversal/express-engine": "^9.1.1",
+ "@nguniversal/module-map-ngfactory-loader": "^8.2.6",
+ "@types/node": "~8.9.4",
+ "codelyzer": "^5.2.2",
+ "copyfiles": "^2.2.0",
+ "cpr": "^3.0.1",
+ "del-cli": "^3.0.0",
+ "ng-packagr": "^9.1.3",
+ "onchange": "^7.0.2",
+ "protractor": "~5.4.4",
+ "source-map-explorer": "^2.4.2",
+ "ts-loader": "^6.2.1",
+ "ts-node": "~8.10.1",
+ "tsickle": "^0.38.1",
+ "tslint": "~6.1.2",
+ "typescript": "~3.8.3",
+ "zone.js": "~0.10.3"
}
- },
- "typings": "./index.d.ts",
- "repository": {
- "type": "git",
- "url": "git+https://github.com/ManuCutillas/ngx-responsive.git"
- },
- "keywords": [
- "angular",
- "angular2",
- "angular4",
- "angular5",
- "angular6",
- "angular7",
- "angular8",
- "angular9",
- "angular10",
- "ng2",
- "ng",
- "ngx",
- "responsive",
- "bootstrap",
- "detect",
- "mobile",
- "tablet",
- "useragent",
- "devices",
- "screen",
- "typescript",
- "directive",
- "retina",
- "browsers",
- "universal",
- "directives"
- ],
- "author": "Manu Cutillas ",
- "contributors": [
- "Christophe HOARAU (https://github.com/no-more)",
- "Kamil Breguła (https://github.com/mik-laj)",
- "Janne Julkunen (https://github.com/sconix)",
- "paulyipkh (https://github.com/paulyipkh)",
- "mburger81 (https://github.com/mburger81)",
- "Alyssa Brunswick (https://github.com/alyssabrunswick)",
- "Quentin (https://github.com/bobbybobby)",
- "Thomas Christensen (https://github.com/tocDK)",
- "Christian Lüdemann (https://github.com/lydemann)",
- "Matt Senter (https://github.com/MattSenter)"
- ],
- "license": "MIT",
- "bugs": {
- "url": "https://github.com/ManuCutillas/ngx-responsive/issues"
- },
- "homepage": "https://github.com/ManuCutillas/ngx-responsive",
- "private": false,
- "peerDependencies": {
- "@angular/common": "^9.1.6",
- "@angular/core": "^9.1.6"
- },
- "devDependencies": {
- "@angular/animations": "^9.1.6",
- "@angular/cli": "^9.0.1",
- "@angular/common": "^9.1.6",
- "@angular/compiler": "^9.1.6",
- "@angular/compiler-cli": "^9.1.6",
- "@angular/core": "^9.1.6",
- "@angular/language-service": "^9.1.6",
- "@angular/platform-browser": "^9.1.6",
- "@angular/platform-browser-dynamic": "^9.1.6",
- "@angular/platform-server": "^9.1.6",
- "@compodoc/compodoc": "1.1.11",
- "@nguniversal/express-engine": "^9.1.1",
- "@nguniversal/module-map-ngfactory-loader": "^8.2.6",
- "@types/node": "~8.9.4",
- "copyfiles": "^2.2.0",
- "cpr": "^3.0.1",
- "del-cli": "^3.0.0",
- "codelyzer": "^5.2.2",
- "ng-packagr": "^9.1.3",
- "onchange": "^7.0.2",
- "protractor": "~5.4.4",
- "source-map-explorer": "^2.4.2",
- "ts-loader": "^6.2.1",
- "tsickle": "^0.38.1",
- "ts-node": "~8.10.1",
- "tslint": "~6.1.2",
- "typescript": "~3.8.3",
- "zone.js": "~0.10.3"
- }
}
diff --git a/src/@core/providers/responsive-base/responsive-base.ts b/src/@core/providers/responsive-base/responsive-base.ts
index 88bf990..bdd8da3 100644
--- a/src/@core/providers/responsive-base/responsive-base.ts
+++ b/src/@core/providers/responsive-base/responsive-base.ts
@@ -5,20 +5,19 @@
* @license MIT
*/
import {
+ ChangeDetectorRef,
EventEmitter,
+ OnDestroy,
+ OnInit,
TemplateRef,
ViewContainerRef,
- OnInit,
- OnDestroy,
- ChangeDetectorRef,
} from '@angular/core';
import { Subscription } from 'rxjs';
import { IResponsiveSubscriptions } from '../../interfaces';
-import { ResponsiveState } from '../responsive-state/responsive-state';
import { PlatformService } from '../platform-service/platform.service';
+import { ResponsiveState } from '../responsive-state/responsive-state';
export abstract class RESPONSIVE_BASE implements OnInit, OnDestroy {
-
private _noRepeat = 0;
private _sizes_grid_state: any;
private _others_grid_state: string[];
@@ -43,7 +42,7 @@ export abstract class RESPONSIVE_BASE implements OnInit, OnDestroy {
orientation: false,
standard: false,
ie: false,
- sizes: false
+ sizes: false,
};
private _isEnabledForPlatform: boolean;
@@ -89,7 +88,9 @@ export abstract class RESPONSIVE_BASE implements OnInit, OnDestroy {
if (directive === 'sizes') {
this._sizes_grid_state = grid_state;
} else {
- this._others_grid_state = (Array.isArray(grid_state) ? grid_state : [grid_state]);
+ this._others_grid_state = (
+ (Array.isArray(grid_state) ? grid_state : [grid_state])
+ );
}
this._directive = directive;
}
@@ -97,35 +98,50 @@ export abstract class RESPONSIVE_BASE implements OnInit, OnDestroy {
public ngOnInit() {
if (this._isEnabledForPlatform) {
if (this.set_active_subscriptions.bootstrap) {
- this._subscription_Bootstrap = this._responsiveState.elemento$.subscribe(this.updateView.bind(this));
+ this._subscription_Bootstrap = this._responsiveState.elemento$.subscribe(
+ this.updateView.bind(this)
+ );
}
-
if (this.set_active_subscriptions.browser) {
- this._subscription_Browser = this._responsiveState.browser$.subscribe(this.updateView.bind(this));
+ this._subscription_Browser = this._responsiveState.browser$.subscribe(
+ this.updateView.bind(this)
+ );
}
if (this.set_active_subscriptions.device) {
- this._subscription_Device = this._responsiveState.device$.subscribe(this.updateView.bind(this));
+ this._subscription_Device = this._responsiveState.device$.subscribe(
+ this.updateView.bind(this)
+ );
}
if (this.set_active_subscriptions.pixelratio) {
- this._subscription_Pixel_Ratio = this._responsiveState.pixel$.subscribe(this.updateView.bind(this));
+ this._subscription_Pixel_Ratio = this._responsiveState.pixel$.subscribe(
+ this.updateView.bind(this)
+ );
}
if (this.set_active_subscriptions.orientation) {
- this._subscription_Orientation = this._responsiveState.orientation$.subscribe(this.updateView.bind(this));
+ this._subscription_Orientation = this._responsiveState.orientation$.subscribe(
+ this.updateView.bind(this)
+ );
}
if (this.set_active_subscriptions.standard) {
- this._subscription_Standard = this._responsiveState.standard$.subscribe(this.updateView.bind(this));
+ this._subscription_Standard = this._responsiveState.standard$.subscribe(
+ this.updateView.bind(this)
+ );
}
if (this.set_active_subscriptions.ie) {
- this._subscription_IE_Version = this._responsiveState.ieVersion$.subscribe(this.updateView.bind(this));
+ this._subscription_IE_Version = this._responsiveState.ieVersion$.subscribe(
+ this.updateView.bind(this)
+ );
}
if (this.set_active_subscriptions.sizes) {
- this._subscription_custom_sizes = this._responsiveState.ancho$.subscribe(this.updateView.bind(this));
+ this._subscription_custom_sizes = this._responsiveState.ancho$.subscribe(
+ this.updateView.bind(this)
+ );
}
}
}
@@ -185,13 +201,35 @@ export abstract class RESPONSIVE_BASE implements OnInit, OnDestroy {
}
private updateView(value: any): void {
- const showBoolean = this._directive === 'sizes' ?
- (
- (typeof this._sizes_grid_state.min === 'undefined' || value >= this._sizes_grid_state.min) &&
- (typeof this._sizes_grid_state.max === 'undefined' || value <= this._sizes_grid_state.max)
- ) :
- !!this._others_grid_state && this._others_grid_state.indexOf(value) !== -1;
+ const showBoolean =
+ this._directive === 'sizes'
+ ? (typeof this._sizes_grid_state.min === 'undefined' ||
+ value >= this._sizes_grid_state.min) &&
+ (typeof this._sizes_grid_state.max === 'undefined' ||
+ value <= this._sizes_grid_state.max)
+ : this.otherGridStateVisible(value);
this.showHide(this._showWhenTrue ? showBoolean : !showBoolean);
}
+
+ private otherGridStateVisible(value: string): boolean {
+ if (!this._others_grid_state) return false;
+ if (this._others_grid_state.indexOf(value) !== -1) return true;
+ if (['lg', 'xl'].indexOf(value) !== -1 && this._others_grid_state.indexOf('lgUp') !== -1) {
+ return true;
+ }
+ if (
+ ['md', 'lg', 'xl'].indexOf(value) !== -1 &&
+ this._others_grid_state.indexOf('mdUp') !== -1
+ ) {
+ return true;
+ }
+ if (
+ ['sm', 'md', 'lg', 'xl'].indexOf(value) !== -1 &&
+ this._others_grid_state.indexOf('smUp') !== -1
+ ) {
+ return true;
+ }
+ return false;
+ }
}
diff --git a/src/@directives/bootstrap/bootstrap-directives.ts b/src/@directives/bootstrap/bootstrap-directives.ts
index d9b7de1..7a5b897 100644
--- a/src/@directives/bootstrap/bootstrap-directives.ts
+++ b/src/@directives/bootstrap/bootstrap-directives.ts
@@ -3,141 +3,195 @@
* @description bootstrap directives
* @license MIT
*/
-import { Directive, Input, TemplateRef, ViewContainerRef, ChangeDetectorRef } from '@angular/core';
-import { PLATFORM_ID, Inject } from '@angular/core';
-
-import { ResponsiveState } from '../../@core/providers/responsive-state/responsive-state';
-import { RESPONSIVE_BASE } from '../../@core/providers/responsive-base/responsive-base';
+import { ChangeDetectorRef, Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
import { PlatformService } from '../../@core/providers/platform-service/platform.service';
+import { RESPONSIVE_BASE } from '../../@core/providers/responsive-base/responsive-base';
+import { ResponsiveState } from '../../@core/providers/responsive-state/responsive-state';
+
@Directive({
- selector: '[xl]'
+ selector: '[xl]',
})
export class XlDirective extends RESPONSIVE_BASE {
-
protected _state = 'xl';
protected _showWhenTrue = true;
-
- constructor( templateRef: TemplateRef,
- viewContainer: ViewContainerRef,
- _responsiveState: ResponsiveState,
- cd: ChangeDetectorRef,
- platformService: PlatformService
- ) {
- super ( templateRef, viewContainer, _responsiveState, cd, platformService );
+ constructor(
+ templateRef: TemplateRef,
+ viewContainer: ViewContainerRef,
+ _responsiveState: ResponsiveState,
+ cd: ChangeDetectorRef,
+ platformService: PlatformService
+ ) {
+ super(templateRef, viewContainer, _responsiveState, cd, platformService);
this.setGrid(this._state, 'bootstrap');
}
}
-@Directive(
-{
- selector: '[lg]'
+@Directive({
+ selector: '[lg]',
})
export class LgDirective extends RESPONSIVE_BASE {
-
protected _state = 'lg';
protected _showWhenTrue = true;
- constructor( templateRef: TemplateRef,
- viewContainer: ViewContainerRef,
- _responsiveState: ResponsiveState,
- cd: ChangeDetectorRef,
- platformService: PlatformService
+ constructor(
+ templateRef: TemplateRef,
+ viewContainer: ViewContainerRef,
+ _responsiveState: ResponsiveState,
+ cd: ChangeDetectorRef,
+ platformService: PlatformService
) {
- super( templateRef, viewContainer, _responsiveState, cd, platformService );
- this.setGrid( this._state, 'bootstrap' );
+ super(templateRef, viewContainer, _responsiveState, cd, platformService);
+ this.setGrid(this._state, 'bootstrap');
}
}
-@Directive(
-{
- selector: '[md]'
+
+@Directive({
+ selector: '[lgUp]',
+})
+export class LgUpDirective extends RESPONSIVE_BASE {
+ protected _state = 'lgUp';
+ protected _showWhenTrue = true;
+ constructor(
+ templateRef: TemplateRef,
+ viewContainer: ViewContainerRef,
+ _responsiveState: ResponsiveState,
+ cd: ChangeDetectorRef,
+ platformService: PlatformService
+ ) {
+ super(templateRef, viewContainer, _responsiveState, cd, platformService);
+ this.setGrid(this._state, 'bootstrap');
+ }
+}
+
+@Directive({
+ selector: '[md]',
})
export class MdDirective extends RESPONSIVE_BASE {
protected _state = 'md';
protected _showWhenTrue = true;
-
- constructor( templateRef: TemplateRef,
- viewContainer: ViewContainerRef,
- _responsiveState: ResponsiveState,
- cd: ChangeDetectorRef,
- platformService: PlatformService
+
+ constructor(
+ templateRef: TemplateRef,
+ viewContainer: ViewContainerRef,
+ _responsiveState: ResponsiveState,
+ cd: ChangeDetectorRef,
+ platformService: PlatformService
) {
- super( templateRef, viewContainer, _responsiveState, cd, platformService );
- this.setGrid( this._state, 'bootstrap' );
+ super(templateRef, viewContainer, _responsiveState, cd, platformService);
+ this.setGrid(this._state, 'bootstrap');
}
}
@Directive({
- selector: '[sm]'
+ selector: '[mdUp]',
})
-export class SmDirective extends RESPONSIVE_BASE {
+export class MdUpDirective extends RESPONSIVE_BASE {
+ protected _state = 'mdUp';
+ protected _showWhenTrue = true;
+ constructor(
+ templateRef: TemplateRef,
+ viewContainer: ViewContainerRef,
+ _responsiveState: ResponsiveState,
+ cd: ChangeDetectorRef,
+ platformService: PlatformService
+ ) {
+ super(templateRef, viewContainer, _responsiveState, cd, platformService);
+ this.setGrid(this._state, 'bootstrap');
+ }
+}
+
+@Directive({
+ selector: '[sm]',
+})
+export class SmDirective extends RESPONSIVE_BASE {
protected _state = 'sm';
protected _showWhenTrue = true;
- constructor( templateRef: TemplateRef,
- viewContainer: ViewContainerRef,
- _responsiveState: ResponsiveState,
- cd: ChangeDetectorRef,
- platformService: PlatformService
+ constructor(
+ templateRef: TemplateRef,
+ viewContainer: ViewContainerRef,
+ _responsiveState: ResponsiveState,
+ cd: ChangeDetectorRef,
+ platformService: PlatformService
) {
- super( templateRef, viewContainer, _responsiveState, cd, platformService );
- this.setGrid( this._state, 'bootstrap' );
+ super(templateRef, viewContainer, _responsiveState, cd, platformService);
+ this.setGrid(this._state, 'bootstrap');
}
}
@Directive({
- selector: '[xs]'
+ selector: '[smUp]',
})
-export class XsDirective extends RESPONSIVE_BASE {
+export class SmUpDirective extends RESPONSIVE_BASE {
+ protected _state = 'smUp';
+ protected _showWhenTrue = true;
+ constructor(
+ templateRef: TemplateRef,
+ viewContainer: ViewContainerRef,
+ _responsiveState: ResponsiveState,
+ cd: ChangeDetectorRef,
+ platformService: PlatformService
+ ) {
+ super(templateRef, viewContainer, _responsiveState, cd, platformService);
+ this.setGrid(this._state, 'bootstrap');
+ }
+}
+
+@Directive({
+ selector: '[xs]',
+})
+export class XsDirective extends RESPONSIVE_BASE {
protected _state = 'xs';
protected _showWhenTrue = true;
-
- constructor( templateRef: TemplateRef,
- viewContainer: ViewContainerRef,
- _responsiveState: ResponsiveState,
- cd: ChangeDetectorRef,
- platformService: PlatformService
+
+ constructor(
+ templateRef: TemplateRef,
+ viewContainer: ViewContainerRef,
+ _responsiveState: ResponsiveState,
+ cd: ChangeDetectorRef,
+ platformService: PlatformService
) {
- super( templateRef, viewContainer, _responsiveState, cd, platformService );
+ super(templateRef, viewContainer, _responsiveState, cd, platformService);
this.setGrid(this._state, 'bootstrap');
}
}
-@Directive(
-{
- selector: '[showItBootstrap]'
+
+@Directive({
+ selector: '[showItBootstrap]',
})
export class ShowItBootstrapDirective extends RESPONSIVE_BASE {
protected _showWhenTrue = true;
- @Input() set showItBootstrap( grid_state: string[] | string ) {
- this.setGrid( grid_state, 'bootstrap' );
+ @Input() set showItBootstrap(grid_state: string[] | string) {
+ this.setGrid(grid_state, 'bootstrap');
}
- constructor( templateRef: TemplateRef,
- viewContainer: ViewContainerRef,
- _responsiveState: ResponsiveState,
- cd: ChangeDetectorRef,
- platformService: PlatformService
+ constructor(
+ templateRef: TemplateRef,
+ viewContainer: ViewContainerRef,
+ _responsiveState: ResponsiveState,
+ cd: ChangeDetectorRef,
+ platformService: PlatformService
) {
- super( templateRef, viewContainer, _responsiveState, cd, platformService );
+ super(templateRef, viewContainer, _responsiveState, cd, platformService);
}
}
-@Directive(
-{
- selector: '[hideItBootstrap]'
+@Directive({
+ selector: '[hideItBootstrap]',
})
export class HideItBootstrapDirective extends RESPONSIVE_BASE {
-
protected _showWhenTrue = false;
- @Input() set hideItBootstrap( grid_state: string[] | string ) {
- this.setGrid( grid_state, 'bootstrap' );
+ @Input() set hideItBootstrap(grid_state: string[] | string) {
+ this.setGrid(grid_state, 'bootstrap');
}
- constructor( templateRef: TemplateRef,
- viewContainer: ViewContainerRef,
- _responsiveState: ResponsiveState,
- cd: ChangeDetectorRef,
- platformService: PlatformService
+ constructor(
+ templateRef: TemplateRef,
+ viewContainer: ViewContainerRef,
+ _responsiveState: ResponsiveState,
+ cd: ChangeDetectorRef,
+ platformService: PlatformService
) {
- super( templateRef, viewContainer, _responsiveState, cd, platformService );
+ super(templateRef, viewContainer, _responsiveState, cd, platformService);
}
}
diff --git a/src/@directives/bootstrap/index.ts b/src/@directives/bootstrap/index.ts
index e1fbebe..a0df532 100644
--- a/src/@directives/bootstrap/index.ts
+++ b/src/@directives/bootstrap/index.ts
@@ -6,23 +6,29 @@
*/
import { Provider } from '@angular/core';
import {
- XlDirective,
- LgDirective,
- MdDirective,
- SmDirective,
- XsDirective,
- ShowItBootstrapDirective,
- HideItBootstrapDirective
+ HideItBootstrapDirective,
+ LgDirective,
+ LgUpDirective,
+ MdDirective,
+ MdUpDirective,
+ ShowItBootstrapDirective,
+ SmDirective,
+ SmUpDirective,
+ XlDirective,
+ XsDirective,
} from './bootstrap-directives';
export * from './bootstrap-directives';
export const BOOTSTRAP_DIRECTIVES: Provider[] = [
- XlDirective,
- LgDirective,
- MdDirective,
- SmDirective,
- XsDirective,
- ShowItBootstrapDirective,
- HideItBootstrapDirective
+ XlDirective,
+ LgDirective,
+ LgUpDirective,
+ MdDirective,
+ MdUpDirective,
+ SmDirective,
+ SmUpDirective,
+ XsDirective,
+ ShowItBootstrapDirective,
+ HideItBootstrapDirective,
];