Can i make custom breakpoint name in the config

[ohabash]

Can i make custom break point name in the confix like below?

    breakPoints: {
        custom: {min: 1000, max: 1919},
    },
    debounceTime: 100
};```

[ohabash]

here is the start of what i came up with

html

<navigation *responsive="show.downto('pro13')"></navigation> if you want to show downto pro13 and exclude it => <navigation *responsive="show.downto('pro13', true)"></navigation>

in a global .ts file

export const show: object = {
    i6: {w: 374},
    i7: {w: 600},
    pro13: {w: 1280},
    pro15: {w: 1440},
    pro27: {w: 2600},
    ipadpro: {w: 1024, h: 1366},
    upto: function(device, exclude) {
    	exclude = (exclude) ? 2 : 0;
    	return {
    		sizes : {
    			max: this[device].w - exclude,
    			min: 300
    		}
    	};
    },
    downto: function(device, exclude) {
    	exclude = (exclude) ? 2 : 0;
    	return {
    		sizes : {
    			max: 3000,
    			min: this[device].w + exclude
    		}
    	};
    },
    on: function(device, exclude) {
    	exclude = (exclude) ? 2 : 0;
    	return {
    		sizes : {
    			max: this[device].w - exclude,
    			min: this[device].w + exclude
    		}
    	};
    },
};

component

import: import { show } from '../_reusable/_global'; set var in the component class: show: object = show;

[ShakurOo]

It should be interesting to allow custom names for our configuration. In my case i need this king of configuration :

const BREAKPOINTS = {
  smallViewport: { min: 0, max: 480 },
  smallGlobalViewport: { min: 481, max: 1008 },
  mediumViewport: { min: 0, max: 1008 },
  largeViewport: { min: 1009 }
}

The properties names is the same in my SASS mixins because I using both techniques for more consistency to handle screensize behavior in my app...

@mixin smallViewport {
  @media (max-width: #{$smallViewport - 1px}) {
    @content;
  }
}

...

Considering the directive which is currently not enough permissive, I have to define tricky configuration like this :

const BREAKPOINTS = {
  xs: { max: 480 },
  sm: { min: 0, max: 1008 },
  md: { min: 481, max: 1008 },
  lg: { min: 1009, max: Infinity },
  xl: { min: Infinity }
}