@schukai/monster 1.22.0 → 1.26.0

package/source/dom/constants.js

@@ -5,29 +5,29 @@ import {Monster} from '../namespace.js';
  * @author schukai GmbH
  */
 
+
 /**
+ * default theme
  * @memberOf Monster.DOM
- * @since 1.8.0
  * @type {string}
  */
-const ATTRIBUTE_PREFIX = 'data-monster-';
+const DEFAULT_THEME = 'monster';
 
 /**
- * This is the name of the attribute to pass options to a control
- * 
  * @memberOf Monster.DOM
  * @since 1.8.0
  * @type {string}
  */
-const ATTRIBUTE_OPTIONS = ATTRIBUTE_PREFIX + 'options';
-
+const ATTRIBUTE_PREFIX = 'data-monster-';
 
 /**
- * default theme
+ * This is the name of the attribute to pass options to a control
+ *
  * @memberOf Monster.DOM
+ * @since 1.8.0
  * @type {string}
  */
-const DEFAULT_THEME = 'monster';
+const ATTRIBUTE_OPTIONS = ATTRIBUTE_PREFIX + 'options';
 
 /**
  * @memberOf Monster.DOM
@@ -91,6 +91,20 @@ const ATTRIBUTE_UPDATER_BIND = ATTRIBUTE_PREFIX + 'bind';
  */
 const ATTRIBUTE_ROLE = ATTRIBUTE_PREFIX + 'role';
 
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.24.0
+ */
+const ATTRIBUTE_DISABLED = 'disabled';
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.24.0
+ */
+const ATTRIBUTE_VALUE = 'value';
+
 /**
  * @memberOf Monster.DOM
  * @type {string}
@@ -101,13 +115,289 @@ const ATTRIBUTE_OBJECTLINK = ATTRIBUTE_PREFIX + 'objectlink';
 /**
  * @memberOf Monster.DOM
  * @type {string}
- * @since 1.10.0
+ * @since 1.24.0
+ */
+const ATTRIBUTE_ERRORMESSAGE = ATTRIBUTE_PREFIX + 'error';
+
+/**
+ * @memberOf Monster.DOM
+ * @type {symbol}
+ * @since 1.24.0
+ */
+const objectUpdaterLinkSymbol = Symbol('monsterUpdater');
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const TAG_SCRIPT = 'script';
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const TAG_STYLE = 'style';
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const TAG_LINK = 'link';
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+
+const ATTRIBUTE_ID = 'id';
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+
+const ATTRIBUTE_CLASS = 'class';
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_TITLE = 'title';
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_SRC = 'src';
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_HREF = 'href';
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_TYPE = 'type';
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_NONCE = 'nonce';
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_TRANSLATE = 'translate';
+
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_TABINDEX = 'tabindex';
+
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_SPELLCHECK = 'spellcheck';
+
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_SLOT = 'slot';
+
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_PART = 'part';
+
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_LANG = 'lang';
+
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_ITEMTYPE = 'itemtype';
+
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_ITEMSCOPE = 'itemscope';
+
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_ITEMREF = 'itemref';
+
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_ITEMID = 'itemid';
+
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_ITEMPROP = 'itemprop';
+
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_IS = 'is';
+
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_INPUTMODE = 'inputmode';
+
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_ACCESSKEY = 'accesskey';
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_AUTOCAPITALIZE = 'autocapitalize';
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_AUTOFOCUS = 'autofocus';
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_CONTENTEDITABLE = 'contenteditable';
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_DIR = 'dir';
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_DRAGGABLE = 'draggable';
+
+
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_ENTERKEYHINT = 'enterkeyhint';
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
+ */
+const ATTRIBUTE_EXPORTPARTS = 'exportparts';
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.25.0
  */
-const OBJECTLINK_KEY_UPDATER = 'monsterUpdater';
+const ATTRIBUTE_HIDDEN = 'hidden';
 
 
 export {
     Monster,
+    ATTRIBUTE_HIDDEN,
+    ATTRIBUTE_EXPORTPARTS,
+    ATTRIBUTE_ENTERKEYHINT,
+    ATTRIBUTE_DRAGGABLE,
+    ATTRIBUTE_DIR,
+    ATTRIBUTE_CONTENTEDITABLE,
+    ATTRIBUTE_AUTOFOCUS,
+    ATTRIBUTE_AUTOCAPITALIZE,
+    ATTRIBUTE_ACCESSKEY,
+    TAG_SCRIPT,
+    TAG_LINK,
+    ATTRIBUTE_INPUTMODE,
+    ATTRIBUTE_IS,
+    ATTRIBUTE_ITEMPROP,
+    ATTRIBUTE_ITEMID,
+    ATTRIBUTE_ITEMREF,
+    ATTRIBUTE_ITEMSCOPE,
+    TAG_STYLE,
+    ATTRIBUTE_ITEMTYPE,
+    ATTRIBUTE_HREF,
+    ATTRIBUTE_LANG,
+    ATTRIBUTE_PART,
+    ATTRIBUTE_SLOT,
+    ATTRIBUTE_SPELLCHECK,
+    ATTRIBUTE_SRC,
+    ATTRIBUTE_TABINDEX,
+    ATTRIBUTE_TRANSLATE,
+    ATTRIBUTE_NONCE,
+    ATTRIBUTE_TYPE,
+    ATTRIBUTE_TITLE,
+    ATTRIBUTE_CLASS,
+    ATTRIBUTE_ID,
     ATTRIBUTE_PREFIX,
     ATTRIBUTE_OPTIONS,
     DEFAULT_THEME,
@@ -121,5 +411,8 @@ export {
     ATTRIBUTE_UPDATER_REMOVE,
     ATTRIBUTE_UPDATER_BIND,
     ATTRIBUTE_OBJECTLINK,
-    OBJECTLINK_KEY_UPDATER
-}
+    ATTRIBUTE_DISABLED,
+    ATTRIBUTE_ERRORMESSAGE,
+    ATTRIBUTE_VALUE,
+    objectUpdaterLinkSymbol
+} 

package/source/dom/customcontrol.js

@@ -5,14 +5,15 @@ import {extend} from "../data/extend.js";
  * @author schukai GmbH
  */
 import {assignToNamespace, Monster} from '../namespace.js';
-import {CustomElement} from "./customelement.js";
+import {ATTRIBUTE_VALUE} from "./constants.js";
+import {CustomElement, attributeObserverSymbol} from "./customelement.js";
 
 
 /**
  * @private
  * @type {symbol}
  */
-const internalSymbol = Symbol('internalSymbol');
+const attachedInternalSymbol = Symbol('attachedInternal');
 
 /**
  * To define a new HTML control we need the power of CustomElement
@@ -21,35 +22,26 @@ const internalSymbol = Symbol('internalSymbol');
  * with the new class name. only then will the tag defined via the `getTag` method be made known to the DOM.
  *
  * <img src="./images/customcontrol-class.png">
- * 
+ *
  * This control uses `attachInternals()` to integrate the control into a form.
  * If the target environment does not support this method, the [polyfill](https://www.npmjs.com/package/element-internals-polyfill ) can be used.
  *
- * You can create the object via the monster namespace `new Monster.DOM.CustomControl()`.
+ * You can create the object via the function `document.createElement()`.
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.22.0/dist/modules/dom/customcontrol.js';
- * console.log(new Monster.DOM.CustomControl())
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.0/dist/monster.js';
+ * document.createElement('monster-')
  * </script>
  * ```
  *
- * Alternatively, you can also integrate this function individually.
- *
- * ```
- * <script type="module">
- * import {CustomControl} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.22.0/dist/modules/dom/customcontrol.js';
- * console.log(new CustomControl())
- * </script>
- * ```
- * 
  * @startuml customcontrol-class.png
  * skinparam monochrome true
  * skinparam shadowing false
  * HTMLElement <|-- CustomElement
  * CustomElement <|-- CustomControl
  * @enduml
- * 
+ *
  * @summary A base class for customcontrols based on CustomElement
  * @see {@link https://www.npmjs.com/package/element-internals-polyfill}
  * @see {@link https://github.com/WICG/webcomponents}
@@ -75,11 +67,25 @@ class CustomControl extends CustomElement {
              * @property {Object}
              * @private
              */
-            this[internalSymbol] = this.attachInternals();
+            this[attachedInternalSymbol] = this.attachInternals();
         }
 
+        initObserver.call(this);
+
     }
 
+    /**
+     * This method determines which attributes are to be monitored by `attributeChangedCallback()`.
+     *
+     * @return {string[]}
+     * @since 1.15.0
+     */
+    static get observedAttributes() {
+        const list = super.observedAttributes;
+        list.push(ATTRIBUTE_VALUE);
+        return list;
+    }    
+    
     /**
      *
      * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals}
@@ -301,11 +307,26 @@ class CustomControl extends CustomElement {
 function getInternal() {
     const self = this;
 
-    if (!(internalSymbol in this)) {
+    if (!(attachedInternalSymbol in this)) {
         throw new Error('ElementInternals is not supported and a polyfill is necessary');
     }
 
-    return this[internalSymbol];
+    return this[attachedInternalSymbol];
+}
+
+/**
+ * @private
+ * @return {object}
+ * @this CustomControl
+ */
+function initObserver() {
+    const self = this;
+
+    // value
+    self[attributeObserverSymbol]['value'] = () => {
+        self.setOption('value', self.getAttribute('value'));
+    }
+
 }
 
 assignToNamespace('Monster.DOM', CustomControl);