@rhtml/custom-attributes 0.0.112 → 0.0.115

package/src/media-attribute.ts

@@ -0,0 +1,90 @@
+import { Attribute } from './attribute';
+
+/**
+ * Media query Attribute
+ * for performance reasons it is key value pair
+ */
+export const MediaMatchers = new Map([
+  ['screen and (max-width: 599px)', 'xs'],
+  ['screen and (min-width: 600px) and (max-width: 959px)', 'sm'],
+  ['screen and (min-width: 960px) and (max-width: 1279px)', 'md'],
+  ['screen and (min-width: 1280px) and (max-width: 1919px)', 'lg'],
+  ['screen and (min-width: 1920px) and (max-width: 5000px)', 'xl'],
+  ['screen and (max-width: 959px)', 'lt-md'],
+  ['screen and (max-width: 1279px)', 'lt-lg'],
+  ['screen and (max-width: 1919px)', 'lt-xl'],
+  ['screen and (min-width: 600px)', 'gt-xs'],
+  ['screen and (min-width: 960px)', 'gt-sm'],
+  ['screen and (min-width: 1280px)', 'gt-md'],
+  ['screen and (min-width: 1920px)', 'gt-lg'],
+]);
+
+export type MediaEvent = MediaQueryList | MediaQueryListEvent;
+export type MediaQueryEvent = [MediaEvent, Attr];
+
+export interface OnUpdateMediaQuery {
+  OnEnterMediaQuery(tuple: MediaQueryEvent): void;
+  OnExitMediaQuery(tuple: MediaQueryEvent): void;
+}
+
+export const Breakpoints = [...MediaMatchers.values()];
+
+export const createFiltersFromSelector = (selector: string) => [
+  ...Breakpoints.map((breakpoint) => `${selector}.${breakpoint}`),
+  selector,
+];
+
+export abstract class MediaQueryAttribute<T>
+  extends Attribute<T>
+  implements OnUpdateMediaQuery
+{
+  private matchers: Map<MediaQueryList, MediaQueryList> = new Map();
+  private cachedAttributes: Map<string, Attr> = new Map();
+
+  listener = (event: MediaQueryList | MediaQueryListEvent) => {
+    const key = `${this.selector.toLowerCase()}.${MediaMatchers.get(
+      event.media
+    )}`;
+    const attribute = this.cachedAttributes.get(key);
+
+    if (event.matches && attribute) {
+      return this.OnEnterMediaQuery([event, attribute]);
+    }
+    return this.OnExitMediaQuery([event, attribute]);
+  };
+
+  OnInit() {
+    if (this.OnEnterMediaQuery || this.OnExitMediaQuery) {
+      for (const query of MediaMatchers.keys()) {
+        const matcher = window.matchMedia(query);
+
+        const attr = Object.values(this.element.attributes).find(
+          (v) =>
+            v.name ===
+            `${this.selector.toLowerCase()}.${MediaMatchers.get(query)}`
+        );
+
+        if (attr) {
+          this.cachedAttributes.set(attr.name, attr);
+          matcher.addEventListener('change', this.listener);
+        }
+
+        if (attr && matcher.matches) {
+          this.listener(matcher);
+        }
+        this.matchers.set(matcher, matcher);
+      }
+    }
+  }
+
+  OnDestroy() {
+    for (const matcher of this.matchers.values()) {
+      matcher.removeEventListener('change', this.listener);
+    }
+    this.cachedAttributes.clear();
+    this.matchers.clear();
+  }
+
+  abstract OnEnterMediaQuery(tuple: MediaQueryEvent): void;
+  abstract OnExitMediaQuery(tuple: MediaQueryEvent): void;
+}

package/src/types.ts

@@ -0,0 +1,34 @@
+import { CustomAttributeRegistry } from './custom-registry';
+
+export type C<T> = new (...args: never[]) => T;
+
+export interface Constructor<T> extends C<T> {
+  options: ModifierOptions;
+}
+
+export interface ModifierOptions {
+  /**
+   * Main selector of the attribute
+   */
+  selector: string;
+  /**
+   * Define custom attribute registry
+   */
+  registry?(this: HTMLElement): CustomAttributeRegistry;
+  /**
+   * Specify attributes to be listened
+   */
+  observedAttributes?: string[];
+  /**
+   * Define MutationObserver to listen for parent element changes
+   * Defining property will attach observer to this.element
+   *  */
+  observe?: MutationObserverInit;
+}
+
+export interface InputOptions {
+  /**
+   * If enabled will trigger OnUpdate method on the Attribute
+   * */
+  observe: true;
+}

package/.eslintrc.js

@@ -1,26 +0,0 @@
-module.exports = {
-    // Specifies the ESLint parser
-    parser: "@typescript-eslint/parser",
-    extends: [
-        // Uses the recommended rules from the @typescript-eslint/eslint-plugin
-        "plugin:@typescript-eslint/recommended",
-        // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
-        "prettier/@typescript-eslint",
-        // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
-        "plugin:prettier/recommended"
-    ],
-    parserOptions: {
-        // Allows for the parsing of modern ECMAScript features
-        ecmaVersion: 2018,
-        // Allows for the use of imports
-        sourceType: "module"
-    },
-    rules: {
-        "@typescript-eslint/explicit-function-return-type": 0,
-        "simple-import-sort/sort": "error",
-        "sort-imports": "off",
-        "import/order": "off",
-        "@typescript-eslint/camelcase": 0
-    },
-    plugins: ["simple-import-sort"]
-};

package/.prettierrc

@@ -1,4 +0,0 @@
-{
-    "singleQuote": true,
-    "printWidth": 80
-}

package/jest.config.js

@@ -1,16 +0,0 @@
-module.exports = {
-  testEnvironment: 'node',
-  testPathIgnorePatterns: ['/node_modules/'],
-  coverageReporters: ['lcov', 'html'],
-  rootDir: './',
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'json', 'node'],
-  globals: {
-    __DEV__: true
-  },
-  transform: {
-    '\\.(ts|tsx)$': 'ts-jest'
-  },
-  testRegex: '/src/.*\\.spec.(ts|tsx|js)$',
-  verbose: true,
-  collectCoverage: true
-};