@travelopia/web-components 0.6.10 → 0.7.0

package/dist/declarations.d.ts

@@ -718,6 +718,102 @@ export class TPMultiSelectElement extends HTMLElement {
     unHighlightAllOptions(): void;
 }
 
+/**
+ * TP Number Spinner Decrement Element.
+ */
+export class TPNumberSpinnerDecrement extends HTMLElement {
+    /**
+     * Constructor.
+     */
+    constructor();
+    /**
+     * Decrement the value.
+     */
+    decrement(): void;
+}
+
+/**
+ * TP Number Spinner Increment Element.
+ */
+export class TPNumberSpinnerIncrement extends HTMLElement {
+    /**
+     * Constructor.
+     */
+    constructor();
+    /**
+     * Increment the value.
+     */
+    increment(): void;
+}
+
+/**
+ * TP Number Spinner Input.
+ */
+export class TPNumberSpinnerInput extends HTMLElement {
+}
+
+/**
+ * TP Number Spinner Element.
+ */
+export class TPNumberSpinner extends HTMLElement {
+    /**
+     * Get minimum value.
+     *
+     * @return {number|null} The minimum value.
+     */
+    get min(): number | null;
+    /**
+     * Set minimum value.
+     *
+     * @param {number} min Minimum value.
+     */
+    set min(min: number);
+    /**
+     * Get maximum value.
+     *
+     * @return {number|null} The maximum value.
+     */
+    get max(): number | null;
+    /**
+     * Set maximum value.
+     *
+     * @param {number} max Maximum value.
+     */
+    set max(max: number);
+    /**
+     * Get current step.
+     *
+     * @return {number} Current step.
+     */
+    get step(): number;
+    /**
+     * Set current step.
+     *
+     * @param {number} step Current step.
+     */
+    set step(step: number);
+    /**
+     * Get value.
+     *
+     * @return {number} The value.
+     */
+    get value(): number;
+    /**
+     * Set current value.
+     *
+     * @param {number} value Current value.
+     */
+    set value(value: number);
+    /**
+     * Increment.
+     */
+    increment(): void;
+    /**
+     * Decrement.
+     */
+    decrement(): void;
+}
+
 /**
  * TP Slider Arrow.
  */

package/dist/number-spinner/index.js

@@ -0,0 +1,2 @@
+(()=>{"use strict";class t extends HTMLElement{}class e extends HTMLElement{constructor(){var t;super(),null===(t=this.querySelector("button"))||void 0===t||t.addEventListener("click",this.increment.bind(this))}increment(){const t=this.closest("tp-number-spinner");null==t||t.increment()}}class n extends HTMLElement{constructor(){var t;super(),null===(t=this.querySelector("button"))||void 0===t||t.addEventListener("click",this.decrement.bind(this))}decrement(){const t=this.closest("tp-number-spinner");null==t||t.decrement()}}class s extends HTMLElement{get min(){const t=this.getAttribute("min");return t?parseInt(t):null}set min(t){this.setAttribute("min",t.toString())}get max(){const t=this.getAttribute("max");return t?parseInt(t):null}set max(t){this.setAttribute("max",t.toString())}get step(){var t;return parseInt(null!==(t=this.getAttribute("step"))&&void 0!==t?t:"1")}set step(t){this.setAttribute("step",t.toString())}get value(){var t,e;return parseInt(null!==(e=null===(t=this.querySelector("tp-number-spinner-input input"))||void 0===t?void 0:t.getAttribute("value"))&&void 0!==e?e:"0")}set value(t){var e;null===(e=this.querySelector("tp-number-spinner-input input"))||void 0===e||e.setAttribute("value",t.toString())}increment(){const t=this.value,e=this.max,n=t+this.step;e&&n>e||(this.value=n)}decrement(){const t=this.value,e=this.min,n=t-this.step;e&&n<e||(this.value=n)}}customElements.define("tp-number-spinner-input",t),customElements.define("tp-number-spinner-increment",e),customElements.define("tp-number-spinner-decrement",n),customElements.define("tp-number-spinner",s)})();
+//# sourceMappingURL=index.js.map

package/dist/number-spinner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dist/number-spinner/index.js","mappings":"mBAGO,MAAMA,UAA6BC,aCKnC,MAAMC,UAAiCD,YAI7C,WAAAE,G,MAECC,QAG8B,QAA9B,EAAAC,KAAKC,cAAe,iBAAU,SAAEC,iBAAkB,QAASF,KAAKG,UAAUC,KAAMJ,MACjF,CAKA,SAAAG,GAEC,MAAME,EAAwCL,KAAKM,QAAS,qBAC5DD,SAAAA,EAAeF,WAChB,ECnBM,MAAMI,UAAiCX,YAI7C,WAAAE,G,MAECC,QAG8B,QAA9B,EAAAC,KAAKC,cAAe,iBAAU,SAAEC,iBAAkB,QAASF,KAAKQ,UAAUJ,KAAMJ,MACjF,CAKA,SAAAQ,GAEC,MAAMH,EAAwCL,KAAKM,QAAS,qBAC5DD,SAAAA,EAAeG,WAChB,ECxBM,MAAMC,UAAwBb,YAMpC,OAAIc,GAEH,MAAMA,EAAqBV,KAAKW,aAAc,OAG9C,OAAKD,EAEGE,SAAUF,GAIX,IACR,CAOA,OAAIA,CAAKA,GAERV,KAAKa,aAAc,MAAOH,EAAII,WAC/B,CAOA,OAAIC,GAEH,MAAMA,EAAqBf,KAAKW,aAAc,OAG9C,OAAKI,EAEGH,SAAUG,GAIX,IACR,CAOA,OAAIA,CAAKA,GAERf,KAAKa,aAAc,MAAOE,EAAID,WAC/B,CAOA,QAAIE,G,MAEH,OAAOJ,SAAqC,QAA3B,EAAAZ,KAAKW,aAAc,eAAQ,QAAI,IACjD,CAOA,QAAIK,CAAMA,GAEThB,KAAKa,aAAc,OAAQG,EAAKF,WACjC,CAOA,SAAIG,G,QAEH,OAAOL,SAAwF,QAA9E,EAAqD,QAArD,EAAAZ,KAAKC,cAAe,wCAAiC,eAAEU,aAAc,gBAAS,QAAI,IACpG,CAOA,SAAIM,CAAOA,G,MAE2C,QAArD,EAAAjB,KAAKC,cAAe,wCAAiC,SAAEY,aAAc,QAASI,EAAMH,WACrF,CAKA,SAAAX,GAEC,MAAMe,EAAuBlB,KAAKiB,MAC5BF,EAAqBf,KAAKe,IAC1BI,EAAmBD,EAAelB,KAAKgB,KAGxCD,GAAOI,EAAWJ,IAMvBf,KAAKiB,MAAQE,EACd,CAKA,SAAAX,GAEC,MAAMU,EAAuBlB,KAAKiB,MAC5BP,EAAqBV,KAAKU,IAC1BS,EAAmBD,EAAelB,KAAKgB,KAGxCN,GAAOS,EAAWT,IAMvBV,KAAKiB,MAAQE,EACd,EC1HDC,eAAeC,OAAQ,0BAA2B1B,GAClDyB,eAAeC,OAAQ,8BAA+BxB,GACtDuB,eAAeC,OAAQ,8BAA+Bd,GACtDa,eAAeC,OAAQ,oBAAqBZ,E","sources":["webpack://@travelopia/web-components/./src/number-spinner/tp-number-spinner-input.ts","webpack://@travelopia/web-components/./src/number-spinner/tp-number-spinner-increment.ts","webpack://@travelopia/web-components/./src/number-spinner/tp-number-spinner-decrement.ts","webpack://@travelopia/web-components/./src/number-spinner/tp-number-spinner.ts","webpack://@travelopia/web-components/./src/number-spinner/index.ts"],"sourcesContent":["/**\n * TP Number Spinner Input.\n */\nexport class TPNumberSpinnerInput extends HTMLElement {\n}\n","/**\n * Internal dependencies.\n */\nimport { TPNumberSpinner } from './tp-number-spinner';\n\n/**\n * TP Number Spinner Increment Element.\n */\nexport class TPNumberSpinnerIncrement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Attach click event for increment.\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', this.increment.bind( this ) );\n\t}\n\n\t/**\n\t * Increment the value.\n\t */\n\tincrement(): void {\n\t\t// Run function on parent.\n\t\tconst numberSpinner: TPNumberSpinner | null = this.closest( 'tp-number-spinner' );\n\t\tnumberSpinner?.increment();\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPNumberSpinner } from './tp-number-spinner';\n\n/**\n * TP Number Spinner Decrement Element.\n */\nexport class TPNumberSpinnerDecrement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Attach click event for decrement.\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', this.decrement.bind( this ) );\n\t}\n\n\t/**\n\t * Decrement the value.\n\t */\n\tdecrement(): void {\n\t\t// Run function on parent.\n\t\tconst numberSpinner: TPNumberSpinner | null = this.closest( 'tp-number-spinner' );\n\t\tnumberSpinner?.decrement();\n\t}\n}\n","/**\n * TP Number Spinner Element.\n */\nexport class TPNumberSpinner extends HTMLElement {\n\t/**\n\t * Get minimum value.\n\t *\n\t * @return {number|null} The minimum value.\n\t */\n\tget min(): number | null {\n\t\t// Get minimum attribute.\n\t\tconst min: string | null = this.getAttribute( 'min' );\n\n\t\t// Check if we have an attribute.\n\t\tif ( min ) {\n\t\t\t// Yep, return its value.\n\t\t\treturn parseInt( min );\n\t\t}\n\n\t\t// Nope, return null.\n\t\treturn null;\n\t}\n\n\t/**\n\t * Set minimum value.\n\t *\n\t * @param {number} min Minimum value.\n\t */\n\tset min( min: number ) {\n\t\t// Set attribute.\n\t\tthis.setAttribute( 'min', min.toString() );\n\t}\n\n\t/**\n\t * Get maximum value.\n\t *\n\t * @return {number|null} The maximum value.\n\t */\n\tget max(): number | null {\n\t\t// Get maximum attribute.\n\t\tconst max: string | null = this.getAttribute( 'max' );\n\n\t\t// Check if we have an attribute.\n\t\tif ( max ) {\n\t\t\t// Yep, return its value.\n\t\t\treturn parseInt( max );\n\t\t}\n\n\t\t// Nope, return null.\n\t\treturn null;\n\t}\n\n\t/**\n\t * Set maximum value.\n\t *\n\t * @param {number} max Maximum value.\n\t */\n\tset max( max: number ) {\n\t\t// Set attribute.\n\t\tthis.setAttribute( 'max', max.toString() );\n\t}\n\n\t/**\n\t * Get current step.\n\t *\n\t * @return {number} Current step.\n\t */\n\tget step(): number {\n\t\t// Get step from attribute.\n\t\treturn parseInt( this.getAttribute( 'step' ) ?? '1' );\n\t}\n\n\t/**\n\t * Set current step.\n\t *\n\t * @param {number} step Current step.\n\t */\n\tset step( step: number ) {\n\t\t// Set attribute.\n\t\tthis.setAttribute( 'step', step.toString() );\n\t}\n\n\t/**\n\t * Get value.\n\t *\n\t * @return {number} The value.\n\t */\n\tget value(): number {\n\t\t// Get value from input.\n\t\treturn parseInt( this.querySelector( 'tp-number-spinner-input input' )?.getAttribute( 'value' ) ?? '0' );\n\t}\n\n\t/**\n\t * Set current value.\n\t *\n\t * @param {number} value Current value.\n\t */\n\tset value( value: number ) {\n\t\t// Set input's value.\n\t\tthis.querySelector( 'tp-number-spinner-input input' )?.setAttribute( 'value', value.toString() );\n\t}\n\n\t/**\n\t * Increment.\n\t */\n\tincrement(): void {\n\t\t// Calculate new value.\n\t\tconst currentValue: number = this.value;\n\t\tconst max: number | null = this.max;\n\t\tconst newValue: number = currentValue + this.step;\n\n\t\t// Check if new value is greater than the maximum.\n\t\tif ( max && newValue > max ) {\n\t\t\t// Yes, that's not allowed.\n\t\t\treturn;\n\t\t}\n\n\t\t// No, set its value.\n\t\tthis.value = newValue;\n\t}\n\n\t/**\n\t * Decrement.\n\t */\n\tdecrement(): void {\n\t\t// Calculate new value.\n\t\tconst currentValue: number = this.value;\n\t\tconst min: number | null = this.min;\n\t\tconst newValue: number = currentValue - this.step;\n\n\t\t// Check if new value is less than the minumum.\n\t\tif ( min && newValue < min ) {\n\t\t\t// Yes, that's not allowed.\n\t\t\treturn;\n\t\t}\n\n\t\t// No, set its value.\n\t\tthis.value = newValue;\n\t}\n}\n","/**\n * Styles.\n */\nimport './style.scss';\n\n/**\n * Components.\n */\nimport { TPNumberSpinnerInput } from './tp-number-spinner-input';\nimport { TPNumberSpinnerIncrement } from './tp-number-spinner-increment';\nimport { TPNumberSpinnerDecrement } from './tp-number-spinner-decrement';\nimport { TPNumberSpinner } from './tp-number-spinner';\n\n/**\n * Register Components.\n */\ncustomElements.define( 'tp-number-spinner-input', TPNumberSpinnerInput );\ncustomElements.define( 'tp-number-spinner-increment', TPNumberSpinnerIncrement );\ncustomElements.define( 'tp-number-spinner-decrement', TPNumberSpinnerDecrement );\ncustomElements.define( 'tp-number-spinner', TPNumberSpinner );\n"],"names":["TPNumberSpinnerInput","HTMLElement","TPNumberSpinnerIncrement","constructor","super","this","querySelector","addEventListener","increment","bind","numberSpinner","closest","TPNumberSpinnerDecrement","decrement","TPNumberSpinner","min","getAttribute","parseInt","setAttribute","toString","max","step","value","currentValue","newValue","customElements","define"],"sourceRoot":""}

package/dist/number-spinner/style.css

@@ -0,0 +1 @@
+tp-number-spinner{display:contents}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@travelopia/web-components",
-  "version": "0.6.10",
+  "version": "0.7.0",
   "description": "Accessible web components for the modern web",
   "files": [
     "dist"