@pap-it/templates-form-element - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

dist/src/component.d.ts

@@ -1,17 +0,30 @@
-import { BaseSystem } from "@pap-it/system-base";
-export declare class FormElementTemplate extends BaseSystem {
+import { Base, Config } from "@pap-it/system-base";
+export declare class FormElement extends Base {
+    static formAssociated: boolean;
+    protected _internals: ElementInternals;
+    private defaultinternal;
+    protected element?: HTMLElement;
+    defaultValue?: string;
     disabled?: boolean;
-    required?: boolean;
-    name?: string;
-    protected formElement: HTMLFormElement;
-    private findAttempts;
-    protected findForm(): void;
-    AssignForm: (form: HTMLFormElement) => void;
-    connectedCallback(): void;
+    name: string;
+    value?: string;
+    constructor(config?: Partial<Config>);
     firstUpdate(): void;
+    formDisabledCallback(disabled: boolean): void;
+    formStateRestoreCallback(state: any, mode: any): void;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    get validity(): ValidityState;
+    get validationMessage(): string;
+    setValidity(flags?: ValidityStateFlags | undefined, message?: string | undefined, anchor?: HTMLElement | undefined): void;
+    formResetCallback(): void;
+    protected connectElement(element: HTMLElement): void;
+    protected updateform(value: string): void;
+    protected validateElement(): void;
+    private debouncedchange;
 }
 declare global {
     interface HTMLElementTagNameMap {
-        "pap-form-element-template": FormElementTemplate;
+        "pap-form-element-template": FormElement;
     }
 }

dist/src/component.js

 import { __decorate } from "tslib";
-// utils 
-import { property } from "@pap-it/system-utils";
-// templates
-import { BaseSystem } from "@pap-it/system-base";
-export class FormElementTemplate extends BaseSystem {
-    constructor() {
-        super(...arguments);
-        this.findAttempts = 0;
-        this.AssignForm = (form) => {
-            this.formElement = form;
-            this.dispatchEvent(new Event("form-element-loaded"));
-        };
+// system
+import { property, debounce } from "@pap-it/system-utils";
+import { Base } from "@pap-it/system-base";
+// local 
+export class FormElement extends Base {
+    constructor(config) {
+        super(config);
+        this.defaultinternal = false;
+        this.name = "missing-name";
+        this._internals = this.attachInternals();
+        this.debouncedchange = debounce(this.debouncedchange, 120);
     }
-    findForm() {
-        const name = this.getAttribute('name');
-        const type = this.getAttribute('type') || "";
-        if (!(name || ['submit', 'reset'].includes(type))) {
-            return;
+    firstUpdate() {
+        super.firstUpdate();
+        if (this.defaultValue === undefined) {
+            this.defaultinternal = true;
+            this.defaultValue = this.value;
         }
-        if (this.formElement)
+    }
+    formDisabledCallback(disabled) {
+        this.disabled = disabled;
+    }
+    formStateRestoreCallback(state, mode) {
+        console.log('[field]: formStateRestoreCallback', { state, mode });
+    }
+    checkValidity() {
+        var _a;
+        if (this._internals === undefined)
+            return true;
+        return (_a = this._internals) === null || _a === void 0 ? void 0 : _a.checkValidity();
+    }
+    reportValidity() {
+        var _a;
+        if (this._internals === undefined)
+            return true;
+        return (_a = this._internals) === null || _a === void 0 ? void 0 : _a.reportValidity();
+    }
+    get validity() {
+        if (this.element && 'validity' in this.element) {
+            return this.element.validity;
+        }
+        if (this._internals === undefined)
+            return { valid: true };
+        return this._internals.validity;
+    }
+    get validationMessage() {
+        if (this.element && 'validationMessage' in this.element) {
+            return this.element.validationMessage;
+        }
+        if (this._internals === undefined)
+            return "";
+        return this._internals.validationMessage;
+    }
+    setValidity(flags, message, anchor) {
+        if (!this._internals === undefined)
             return;
-        setTimeout(() => {
-            const closestPapForm = this.shadow_closest("pap-form");
-            if (closestPapForm) {
-                const form = closestPapForm.querySelector('form');
-                if (form)
-                    this.AssignForm(form);
-            }
-            else {
-                const form = this.shadow_closest("form");
-                if (form)
-                    this.AssignForm(form);
-            }
-            if (!this.formElement && this.findAttempts < 10) {
-                this.findAttempts++;
-                this.findForm();
-            }
-        }, 100 + this.findAttempts * 100);
+        this._internals.setValidity(flags, message, anchor || undefined);
     }
-    connectedCallback() {
-        super.connectedCallback();
-        this.findForm();
+    formResetCallback() {
+        this.value = this.defaultValue;
+        if (this.element && 'value' in this.element) {
+            this.element.value = this.value || "";
+        }
     }
-    firstUpdate() {
-        super.firstUpdate();
-        if (!this.formElement)
-            this.findForm();
+    // private functions
+    connectElement(element) {
+        if (!this.element)
+            this.element = element;
     }
+    updateform(value) {
+        if (this._internals !== undefined) {
+            this._internals.setFormValue(value);
+        }
+    }
+    validateElement() {
+        // do something 
+    }
+    debouncedchange() {
+        this.dispatchEvent(new Event('debounce-change'));
+        this.validateElement();
+    }
 }
+FormElement.formAssociated = true;
 __decorate([
-    property({ type: Boolean, rerender: false })
-], FormElementTemplate.prototype, "disabled", void 0);
+    property({
+        attribute: 'default-value',
+        after: function (value) {
+            if (!this.defaultinternal)
+                this.value = value;
+            this.defaultinternal = false;
+        }
+    })
+], FormElement.prototype, "defaultValue", void 0);
 __decorate([
-    property({ type: Boolean, rerender: false })
-], FormElementTemplate.prototype, "required", void 0);
+    property({
+        type: Boolean,
+        after: function (value) {
+            if (value) {
+                this.setAttribute('aria-disabled', 'true');
+            }
+            else {
+                this.setAttribute('aria-disabled', 'false');
+            }
+        }
+    })
+], FormElement.prototype, "disabled", void 0);
 __decorate([
     property({ rerender: false })
-], FormElementTemplate.prototype, "name", void 0);
-//# sourceMappingURL=component.js.map
+], FormElement.prototype, "name", void 0);
+__decorate([
+    property({
+        after: function (value) {
+            this.updateform(value);
+            this.debouncedchange();
+        }
+    })
+], FormElement.prototype, "value", void 0);

dist/src/index.js

 export * from './component';
 export * from './types';
 //    *    <-- This is an asshole
-//# sourceMappingURL=index.js.map

dist/src/register.js

@@ -1,2 +0,2 @@
-import { FormElementTemplate } from './component.js';
+import { FormElement } from './component.js';
 // Register the element with the browser
@@ -8,4 +8,3 @@ const cElements = customElements !== null && customElements !== void 0 ? customElements : window === null || window === void 0 ? void 0 : window.customElements;
 if (!cElements.get('pap-form-element-template')) {
-    cElements.define('pap-form-element-template', FormElementTemplate);
+    cElements.define('pap-form-element-template', FormElement);
 }
-//# sourceMappingURL=register.js.map

dist/src/types.js

 export {};
-//# sourceMappingURL=types.js.map

package.json

 {
   "name": "@pap-it/templates-form-element",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "scripts": {
@@ -8,4 +8,6 @@ "init": "sh .scripts/init.sh",
     "build": ".scripts/build.sh",
+    "react": "sh .scripts/helper/build-react.sh",
     "watch": ".scripts/watch.sh",
     "manual-publish": "sh .scripts/publish.sh",
+    "preversion": "sh .scripts/preversion.sh",
     "postversion": "sh .scripts/postversion.sh",
@@ -15,2 +17,3 @@ "combine": ".scripts/combine.sh && .scripts/start.sh combined",
     "isolate": "sh .scripts/isolate.sh",
+    "analyze": "sh .scripts/analyze.sh",
     "interactive": "sh .scripts/helper/build-interactive.sh",
@@ -23,9 +26,11 @@ "variations": "sh .scripts/helper/build-variations.sh",
     "asset/",
-    "dist/"
+    "dist/",
+    "react/"
   ],
   "exports": {
     ".": "./dist/src/index.js",
-    "./wc": "./dist/register.bundle.mjs"
+    "./wc": "./dist/register.bundle.mjs",
+    "./react": "./react/index.ts"
   },
-  "author": "Henry Pap",
+  "author": "onkelhoy",
   "private": false,
@@ -42,13 +47,12 @@ "publishConfig": {
   "dependencies": {
-    "@pap-it/system-base": "1.0.4",
-    "@pap-it/system-utils": "1.0.4"
+    "@pap-it/system-utils": "1.0.5",
+    "@pap-it/system-base": "1.0.5"
   },
   "devDependencies": {
-    "eslint": "^8.53.0",
-    "@pap-it/system-doc": "1.0.4",
+    "@pap-it/system-doc": "1.0.5",
     "esbuild": "^0.17.18",
-    "node-html-parser": "^6.1.5",
-    "node-sass": "^9.0.0",
     "tslib": "^2.5.0",
-    "typescript": "^5.0.4"
+    "sass": "^1.70.0",
+    "typescript": "^5.0.4",
+    "node-html-parser": "^6.1.5"
   },
@@ -55,0 +59,0 @@ "keywords": [

README.md

@@ -1,6 +0,6 @@
-# Form-elementTemplate
+# FormElement
 
 Atomic Type: templates
 
-Version: 1.1.0
+Version: 1.0.5
 
@@ -7,0 +7,0 @@ ## Development

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

6

decreased by-14.29%

Lines of code

172

increased by70.3%

Worsened metrics

Total package byte prevSize

18095

decreased by-1.64%

Number of package files

13

decreased by-31.58%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@pap-it/system-base@1.0.5(transitive)

• + Added@pap-it/system-utils@1.0.5(transitive)

• - Removed@pap-it/system-base@1.0.4(transitive)

• - Removed@pap-it/system-utils@1.0.4(transitive)

• Updated@pap-it/system-base@1.0.5

• Updated@pap-it/system-utils@1.0.5