@rhtml/custom-attributes 0.0.111 → 0.0.114

package/README.md

@@ -306,3 +306,126 @@ By changing `delay` attribute because we use `observe: true` method `OnUpdateAtt
   My Animated Element
 </h2>
 ```
+
+#### Media query matcher
+
+By extending `MediaQueryAttribute` we gain two more events to handle media matches `OnEnterMediaQuery` and `OnExitMediaQuery`
+
+For example when we define attribute selector `color` we can use available media breakpoints `xs`, `sm`, `md`,`lg`,`xl`.
+
+Extending `MediaQueryAttribute` will help you to track values from specific resolutions
+
+```typescript
+import {
+  MediaQueryEvent,
+  ExitMediaQueryAttributes,
+  MediaQueryAttribute,
+  Modifier
+} from '@rhtml/custom-attributes';
+
+interface Styles {
+  color: string;
+}
+
+@Modifier({
+  selector: 'color'
+})
+export class Color extends MediaQueryAttribute<Styles> {
+  private prevValue: string;
+
+  OnInit() {
+    this.modify();
+    /* Executing media matcher init */
+    super.OnInit();
+  }
+
+  OnDestroy() {
+    this.clean();
+    /* Executing media matcher destroy */
+    super.OnDestroy();
+  }
+
+  OnUpdate() {
+    this.modify();
+  }
+
+  OnEnterMediaQuery([event, attribute]: MediaQueryEvent) {
+    console.log(event, attribute.value);
+    this.prevValue = this.value;
+    this.value = attribute.value ?? this.value;
+    this.modify();
+  }
+
+  OnExitMediaQuery([event, selector]: ExitMediaQueryAttributes) {
+    this.value = this.prevValue ?? this.originalValue;
+    this.modify();
+  }
+
+  clean() {
+    this.setStyles({ color: null })(this.element);
+  }
+
+  modify() {
+    this.setStyles({ color: this.value || null })(this.element);
+  }
+}
+```
+
+##### Usage
+
+```html
+<div color="red" color.xs="green" color.md="gray">
+  My text
+</div>
+```
+
+##### Available breakpoints
+
+| Breakpoint | Media Query                                            |
+| ---------- | ------------------------------------------------------ |
+| xs         | screen and (max-width: 599px)                          |
+| sm         | screen and (min-width: 600px) and (max-width: 959px)   |
+| md         | screen and (min-width: 960px) and (max-width: 1279px)  |
+| lg         | screen and (min-width: 1280px) and (max-width: 1919px) |
+| xl         | screen and (min-width: 1920px) and (max-width: 5000px) |
+|            |                                                        |
+| lt-sm      | screen and (max-width: 599px) (use xs)                 |
+| lt-md      | screen and (max-width: 959px)                          |
+| lt-lg      | screen and (max-width: 1279px)                         |
+| lt-xl      | screen and (max-width: 1919px)                         |
+|            |                                                        |
+| gt-xs      | screen and (min-width: 600px)                          |
+| gt-sm      | screen and (min-width: 960px)                          |
+| gt-md      | screen and (min-width: 1280px)                         |
+| gt-lg      | screen and (min-width: 1920px)                         |
+
+#### Defining custom MutationObserver which is attached on the element used by the Attribute
+
+```typescript
+import { Attribute, Modifier } from '@rhtml/custom-attributes';
+
+@Modifier({
+  selector: 'color',
+  observe: {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: ['my-attribute']
+  }
+})
+export class Color extends Attribute {
+  OnChange(records: MutationRecord[]) {
+    console.log(records);
+    const attributeValue = this.element.getAttribute('my-attribute');
+    console.log(attributeValue); // 'test'
+  }
+}
+```
+
+```html
+<div color="red" my-attribute="test">
+  My element
+</div>
+```
+
+If we change `my-attribute` value we will trigger `OnChange` which will give us mutation records

package/dist/attribute.d.ts

@@ -0,0 +1,15 @@
+import { ModifierOptions } from './types';
+export declare abstract class Attribute<T = {}> {
+    static options: ModifierOptions;
+    element?: HTMLElement;
+    value?: string;
+    selector?: string;
+    parent?: HTMLElement;
+    observer?: MutationObserver;
+    setStyles(keys: T): (div: HTMLElement | Element | HTMLDivElement) => void;
+    OnInit(): void;
+    OnDestroy(): void;
+    OnUpdate(_oldValue: string, _newValue: string): void;
+    OnUpdateAttribute(_name: string, _value: string): void;
+    OnChange(_records: MutationRecord[]): void;
+}

package/dist/attribute.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Attribute = void 0;
+/*  */
+class Attribute {
+    setStyles(keys) {
+        return (div) => {
+            for (const [key, value] of Object.entries(keys)) {
+                div['style'][key] = value;
+            }
+        };
+    }
+    OnInit() {
+        /* */
+    }
+    OnDestroy() {
+        /* */
+    }
+    OnUpdate(_oldValue, _newValue) {
+        /* */
+    }
+    OnUpdateAttribute(_name, _value) {
+        /* */
+    }
+    OnChange(_records) {
+        /* */
+    }
+}
+exports.Attribute = Attribute;
+//# sourceMappingURL=attribute.js.map

package/dist/attribute.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attribute.js","sourceRoot":"","sources":["../src/attribute.ts"],"names":[],"mappings":";;;AAGA,MAAM;AACN,MAAsB,SAAS;IAO7B,SAAS,CAAC,IAAO;QACf,OAAO,CAAC,GAA2C,EAAE,EAAE;YACrD,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;gBAC/C,GAAG,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;aAC3B;QACH,CAAC,CAAC;IACJ,CAAC;IACD,MAAM;QACJ,KAAK;IACP,CAAC;IACD,SAAS;QACP,KAAK;IACP,CAAC;IACD,QAAQ,CAAC,SAAiB,EAAE,SAAiB;QAC3C,KAAK;IACP,CAAC;IACD,iBAAiB,CAAC,KAAa,EAAE,MAAc;QAC7C,KAAK;IACP,CAAC;IAED,QAAQ,CAAC,QAA0B;QACjC,KAAK;IACP,CAAC;CACF;AA9BD,8BA8BC"}

package/dist/custom-registry.d.ts

@@ -0,0 +1,18 @@
+import { Attribute } from './attribute';
+import { Constructor } from './types';
+export declare class CustomAttributeRegistry {
+    private parent;
+    private _attrMap;
+    private _elementMap;
+    private observer;
+    constructor(parent: HTMLElement);
+    define(attrName: string, Constructor: Constructor<Attribute>): void;
+    get(element: HTMLElement, attrName: string): Attribute<{}>;
+    private getConstructor;
+    private observe;
+    unsubscribe(): void;
+    private upgradeAttribute;
+    private upgradeElement;
+    private downgrade;
+    private found;
+}

package/dist/custom-registry.js

@@ -0,0 +1,155 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomAttributeRegistry = void 0;
+const helpers_1 = require("./helpers");
+class CustomAttributeRegistry {
+    constructor(parent) {
+        this.parent = parent;
+        this._attrMap = new Map();
+        this._elementMap = new Map();
+        if (!parent) {
+            throw new Error('Must be given a parent element');
+        }
+        this.observe();
+    }
+    define(attrName, Constructor) {
+        this._attrMap.set(attrName.toLowerCase(), Constructor);
+        this.upgradeAttribute(attrName);
+    }
+    get(element, attrName) {
+        const map = this._elementMap.get(element);
+        if (!map)
+            return;
+        return map.get(attrName.toLowerCase());
+    }
+    getConstructor(attrName) {
+        return this._attrMap.get(attrName.toLowerCase());
+    }
+    observe() {
+        var _a, _b;
+        this.observer = new MutationObserver(mutations => {
+            for (const mutation of mutations) {
+                if (mutation.type === 'attributes') {
+                    const attr = this.getConstructor(mutation.attributeName);
+                    if (attr) {
+                        this.found(mutation.attributeName, mutation.target, mutation.oldValue);
+                    }
+                }
+                else {
+                    for (const node of mutation.removedNodes) {
+                        this.downgrade(node);
+                    }
+                    for (const node of mutation.addedNodes) {
+                        this.upgradeElement(node);
+                    }
+                }
+            }
+        });
+        this.observer.observe((_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a['shadowRoot']) !== null && _b !== void 0 ? _b : this.parent, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeOldValue: true
+        });
+    }
+    unsubscribe() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        const values = [...this._elementMap.values()];
+        for (const elModifiers of values) {
+            const modifiers = [...elModifiers.values()];
+            for (const modifier of modifiers) {
+                modifier.OnDestroy();
+                if (modifier.observer) {
+                    modifier.observer.disconnect();
+                }
+            }
+            elModifiers.clear();
+        }
+        this._elementMap.clear();
+    }
+    upgradeAttribute(attrName, doc) {
+        const parent = doc || this.parent;
+        const matches = parent.querySelectorAll('[' + attrName + ']');
+        for (const match of [...matches]) {
+            this.found(attrName, match);
+        }
+    }
+    upgradeElement(element) {
+        if (element.nodeType !== 1) {
+            return;
+        }
+        for (const attr of element.attributes) {
+            if (this.getConstructor(attr.name)) {
+                this.found(attr.name, element);
+            }
+        }
+        for (const [attr] of this._attrMap) {
+            this.upgradeAttribute(attr, element);
+        }
+    }
+    downgrade(element) {
+        const map = this._elementMap.get(element);
+        if (!map) {
+            return;
+        }
+        for (const [, instance] of map) {
+            if (instance.OnDestroy) {
+                instance.OnDestroy();
+            }
+        }
+        this._elementMap.delete(element);
+    }
+    found(attributeName, el, oldVal) {
+        var _a, _b;
+        let map = this._elementMap.get(el);
+        if (!map) {
+            map = new Map();
+            this._elementMap.set(el, map);
+        }
+        let modifier = map.get(attributeName);
+        const attribute = el.getAttribute(attributeName);
+        if (!modifier) {
+            const Modifier = this.getConstructor(attributeName);
+            modifier = new Modifier();
+            if ((_b = (_a = Modifier.options) === null || _a === void 0 ? void 0 : _a.observedAttributes) === null || _b === void 0 ? void 0 : _b.length) {
+                for (const observedAttribute of Modifier.options.observedAttributes) {
+                    helpers_1.observe(modifier, observedAttribute);
+                }
+            }
+            modifier.element = el;
+            modifier.selector = attributeName;
+            modifier.value = attribute || modifier.value;
+            modifier.parent = this.parent;
+            if (modifier.OnInit) {
+                modifier.OnInit();
+            }
+            if (Modifier.options.observe) {
+                modifier.observer = new MutationObserver(records => modifier.OnChange(records));
+                modifier.observer.observe(modifier.element, Modifier.options.observe);
+            }
+            map.set(attributeName, modifier);
+            return;
+        }
+        if (attribute == null && !!modifier.value) {
+            modifier.value = attribute;
+            if (modifier.OnDestroy) {
+                modifier.OnDestroy();
+            }
+            if (modifier.observer) {
+                modifier.observer.disconnect();
+            }
+            map.delete(attributeName);
+            return;
+        }
+        if (attribute !== modifier.value) {
+            modifier.value = attribute;
+            if (modifier.OnUpdate) {
+                modifier.OnUpdate(oldVal, attribute);
+            }
+            return;
+        }
+    }
+}
+exports.CustomAttributeRegistry = CustomAttributeRegistry;
+//# sourceMappingURL=custom-registry.js.map

package/dist/custom-registry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-registry.js","sourceRoot":"","sources":["../src/custom-registry.ts"],"names":[],"mappings":"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"}

package/dist/decorators/index.d.ts

@@ -0,0 +1,21 @@
+import { InputOptions, ModifierOptions } from '../types';
+/**
+ * Decorator @Input
+ * Used to get attribute from element
+ */
+export declare const Input: (options?: InputOptions) => (target: any, memberName: string) => void;
+/**
+ * Decorator @Modifier
+ * Accepts parameter options with selector and registry
+ */
+export declare const Modifier: (options: ModifierOptions) => (target: Function) => void;
+/**
+ * Decorator @CustomAttribute
+ * Accepts parameter options with selector and registry
+ */
+export declare const CustomAttribute: (options: ModifierOptions) => (target: Function) => void;
+/**
+ * Decorator @Directive
+ * Accepts parameter options with selector and registry
+ */
+export declare const Directive: (options: ModifierOptions) => (target: Function) => void;

package/dist/decorators/index.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Directive = exports.CustomAttribute = exports.Modifier = exports.Input = void 0;
+const helpers_1 = require("../helpers");
+/**
+ * Decorator @Input
+ * Used to get attribute from element
+ */
+exports.Input = (options) => (target, memberName) => {
+    const OnInit = target.OnInit || helpers_1.noop;
+    Object.defineProperty(target, 'OnInit', {
+        value() {
+            var _a;
+            let originalValue = this[memberName];
+            const element = (_a = this.element) !== null && _a !== void 0 ? _a : this;
+            Object.defineProperty(this, memberName, {
+                get: function () {
+                    originalValue = element.getAttribute(memberName.toLowerCase());
+                    return originalValue;
+                },
+                set(value) {
+                    element.setAttribute(memberName.toLowerCase(), value);
+                    originalValue = value;
+                },
+                configurable: true
+            });
+            return OnInit.call(this);
+        },
+        configurable: true
+    });
+    if (options === null || options === void 0 ? void 0 : options.observe) {
+        helpers_1.observe(target, memberName);
+    }
+};
+/**
+ * Decorator @Modifier
+ * Accepts parameter options with selector and registry
+ */
+exports.Modifier = (options) => {
+    return (target) => {
+        target['options'] = options;
+    };
+};
+/**
+ * Decorator @CustomAttribute
+ * Accepts parameter options with selector and registry
+ */
+exports.CustomAttribute = exports.Modifier;
+/**
+ * Decorator @Directive
+ * Accepts parameter options with selector and registry
+ */
+exports.Directive = exports.Modifier;
+//# sourceMappingURL=index.js.map

package/dist/decorators/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/decorators/index.ts"],"names":[],"mappings":";;;AAAA,wCAA2C;AAG3C;;;GAGG;AACU,QAAA,KAAK,GAAG,CAAC,OAAsB,EAAE,EAAE,CAAC,CAC/C,MAAM,EACN,UAAkB,EAClB,EAAE;IACF,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,IAAI,cAAI,CAAC;IACrC,MAAM,CAAC,cAAc,CAAC,MAAM,EAAE,QAAQ,EAAE;QACtC,KAAK;;YACH,IAAI,aAAa,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC;YAErC,MAAM,OAAO,SAAG,IAAI,CAAC,OAAO,mCAAI,IAAI,CAAC;YACrC,MAAM,CAAC,cAAc,CAAC,IAAI,EAAE,UAAU,EAAE;gBACtC,GAAG,EAAE;oBACH,aAAa,GAAG,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC,CAAC;oBAC/D,OAAO,aAAa,CAAC;gBACvB,CAAC;gBACD,GAAG,CAAC,KAAK;oBACP,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,WAAW,EAAE,EAAE,KAAK,CAAC,CAAC;oBACtD,aAAa,GAAG,KAAK,CAAC;gBACxB,CAAC;gBACD,YAAY,EAAE,IAAI;aACnB,CAAC,CAAC;YACH,OAAO,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC3B,CAAC;QACD,YAAY,EAAE,IAAI;KACnB,CAAC,CAAC;IAEH,IAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,EAAE;QACpB,iBAAO,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;KAC7B;AACH,CAAC,CAAC;AAEF;;;GAGG;AACU,QAAA,QAAQ,GAAG,CAAC,OAAwB,EAAE,EAAE;IACnD,OAAO,CAAC,MAAgB,EAAE,EAAE;QAC1B,MAAM,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC;IAC9B,CAAC,CAAC;AACJ,CAAC,CAAC;AAEF;;;GAGG;AACU,QAAA,eAAe,GAAG,gBAAQ,CAAC;AACxC;;;GAGG;AACU,QAAA,SAAS,GAAG,gBAAQ,CAAC"}

package/dist/helpers/index.d.ts

@@ -0,0 +1,2 @@
+export declare const noop: () => void;
+export declare const observe: (target: unknown, memberName: string) => void;

package/dist/helpers/index.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.observe = exports.noop = void 0;
+exports.noop = function () {
+    /*  */
+};
+exports.observe = (target, memberName) => {
+    const prototype = target.constructor.prototype;
+    const OnInit = prototype.OnInit || exports.noop;
+    const OnDestroy = prototype.OnDestroy || exports.noop;
+    const OnUpdateAttribute = prototype.OnUpdateAttribute || exports.noop;
+    let observer;
+    prototype.OnInit = function () {
+        var _a;
+        const element = (_a = this.element) !== null && _a !== void 0 ? _a : this;
+        if (observer) {
+            observer.disconnect();
+        }
+        observer = new MutationObserver(() => {
+            OnUpdateAttribute.call(this, memberName, element.getAttribute(memberName));
+            target[memberName] = element.getAttribute(memberName);
+        });
+        observer.observe(element, {
+            attributeFilter: [memberName],
+            attributes: true
+        });
+        return OnInit.call(this);
+    };
+    prototype.OnDestroy = function () {
+        observer.disconnect();
+        return OnDestroy.call(this);
+    };
+};
+//# sourceMappingURL=index.js.map

package/dist/helpers/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/helpers/index.ts"],"names":[],"mappings":";;;AAAa,QAAA,IAAI,GAAG;IAClB,MAAM;AACR,CAAC,CAAC;AAEW,QAAA,OAAO,GAAG,CAAC,MAAe,EAAE,UAAkB,EAAE,EAAE;IAC7D,MAAM,SAAS,GAAG,MAAM,CAAC,WAAW,CAAC,SAAS,CAAC;IAC/C,MAAM,MAAM,GAAG,SAAS,CAAC,MAAM,IAAI,YAAI,CAAC;IACxC,MAAM,SAAS,GAAG,SAAS,CAAC,SAAS,IAAI,YAAI,CAAC;IAC9C,MAAM,iBAAiB,GAAG,SAAS,CAAC,iBAAiB,IAAI,YAAI,CAAC;IAE9D,IAAI,QAA0B,CAAC;IAC/B,SAAS,CAAC,MAAM,GAAG;;QACjB,MAAM,OAAO,SAAG,IAAI,CAAC,OAAO,mCAAI,IAAI,CAAC;QACrC,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,UAAU,EAAE,CAAC;SACvB;QACD,QAAQ,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;YACnC,iBAAiB,CAAC,IAAI,CACpB,IAAI,EACJ,UAAU,EACV,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,CACjC,CAAC;YACF,MAAM,CAAC,UAAU,CAAC,GAAG,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;QACxD,CAAC,CAAC,CAAC;QACH,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE;YACxB,eAAe,EAAE,CAAC,UAAU,CAAC;YAC7B,UAAU,EAAE,IAAI;SACjB,CAAC,CAAC;QACH,OAAO,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC,CAAC;IACF,SAAS,CAAC,SAAS,GAAG;QACpB,QAAQ,CAAC,UAAU,EAAE,CAAC;QACtB,OAAO,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC9B,CAAC,CAAC;AACJ,CAAC,CAAC"}

package/dist/index.d.ts

@@ -1,55 +1,6 @@
-export declare type C<T> = new (...args: never[]) => T;
-export interface Constructor<T> extends C<T> {
-    options: ModifierOptions;
-}
-interface ModifierOptions {
-    selector: string;
-    registry?(this: HTMLElement): CustomAttributeRegistry;
-    observedAttributes?: string[];
-}
-interface InputOptions {
-    /**
-     * If enabled will trigger OnUpdate method on the Attribute
-     * */
-    observe: true;
-}
-/**
- * Decorator @Input
- * Used to get attribute from element
- */
-export declare const Input: (options?: InputOptions) => (target: any, memberName: string) => void;
-/**
- * Decorator @Modifier
- * Accepts parameter options with selector and registry
- */
-export declare const Modifier: (options: ModifierOptions) => (target: Function) => void;
-export declare const CustomAttribute: (options: ModifierOptions) => (target: Function) => void;
-export declare abstract class Attribute<T = {}> {
-    static options: ModifierOptions;
-    element?: HTMLElement;
-    value?: string;
-    selector?: string;
-    parent?: HTMLElement;
-    setStyles(keys: T): (div: HTMLElement | Element | HTMLDivElement) => void;
-    OnInit(): void;
-    OnDestroy(): void;
-    OnUpdate(_oldValue: string, _newValue: string): void;
-    OnUpdateAttribute(_name: string, _value: string): void;
-}
-export declare class CustomAttributeRegistry {
-    private parent;
-    private _attrMap;
-    private _elementMap;
-    private observer;
-    constructor(parent: HTMLElement);
-    define(attrName: string, Constructor: Constructor<Attribute>): void;
-    get(element: HTMLElement, attrName: string): Attribute<{}>;
-    private getConstructor;
-    private observe;
-    unsubscribe(): void;
-    private upgradeAttribute;
-    private upgradeElement;
-    private downgrade;
-    private found;
-}
-export {};
+export * from './attribute';
+export * from './custom-registry';
+export * from './decorators';
+export * from './helpers';
+export * from './media-attribute';
+export * from './types';