@travelopia/web-components 0.0.1 → 0.0.3

package/dist/modal/index.js

@@ -0,0 +1,2 @@
+(()=>{"use strict";class e extends HTMLElement{constructor(){var e;super(),null===(e=document.querySelector("body"))||void 0===e||e.appendChild(this)}connectedCallback(){this.addEventListener("click",this.handleClick.bind(this))}open(){this.setAttribute("open","yes")}close(){this.removeAttribute("open")}handleClick(e){e.target===this&&"yes"===this.getAttribute("overlay-click-close")&&(e.preventDefault(),e.stopPropagation(),this.close())}}class t extends HTMLElement{connectedCallback(){const e=this.querySelector("button");null==e||e.addEventListener("click",this.closeModal.bind(this))}closeModal(){const e=this.closest("tp-modal");null==e||e.close()}}customElements.define("tp-modal",e),customElements.define("tp-modal-close",t)})();
+//# sourceMappingURL=index.js.map

package/dist/modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dist/modal/index.js","mappings":"mBAGO,MAAMA,UAAuBC,YAInC,WAAAC,G,MACCC,QACgC,QAAhC,EAAAC,SAASC,cAAe,eAAQ,SAAEC,YAAaC,KAChD,CAKA,iBAAAC,GACCD,KAAKE,iBAAkB,QAASF,KAAKG,YAAYC,KAAMJ,MACxD,CAKA,IAAAK,GACCL,KAAKM,aAAc,OAAQ,MAC5B,CAKA,KAAAC,GACCP,KAAKQ,gBAAiB,OACvB,CAOA,WAAAL,CAAaM,GACPA,EAAEC,SAAWV,MAAQ,QAAUA,KAAKW,aAAc,yBACtDF,EAAEG,iBACFH,EAAEI,kBACFb,KAAKO,QAEP,ECpCM,MAAMO,UAA4BpB,YAIxC,iBAAAO,GACC,MAAMc,EAAmCf,KAAKF,cAAe,UAC7DiB,SAAAA,EAAQb,iBAAkB,QAASF,KAAKgB,WAAWZ,KAAMJ,MAC1D,CAKA,UAAAgB,GACC,MAAMC,EAA+BjB,KAAKkB,QAAS,YACnDD,SAAAA,EAAOV,OACR,ECTDY,eAAeC,OAAQ,WAAY3B,GACnC0B,eAAeC,OAAQ,iBAAkBN,E","sources":["webpack://web-components/./src/modal/tp-modal.ts","webpack://web-components/./src/modal/tp-modal-close.ts","webpack://web-components/./src/modal/index.ts"],"sourcesContent":["/**\n * TP Modal.\n */\nexport class TPModalElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\tsuper();\n\t\tdocument.querySelector( 'body' )?.appendChild( this );\n\t}\n\n\t/**\n\t * Connected callback.\n\t */\n\tconnectedCallback(): void {\n\t\tthis.addEventListener( 'click', this.handleClick.bind( this ) );\n\t}\n\n\t/**\n\t * Open the modal.\n\t */\n\topen(): void {\n\t\tthis.setAttribute( 'open', 'yes' );\n\t}\n\n\t/**\n\t * Close the modal.\n\t */\n\tclose(): void {\n\t\tthis.removeAttribute( 'open' );\n\t}\n\n\t/**\n\t * Handle when the component is clicked.\n\t *\n\t * @param {Event} e Event.\n\t */\n\thandleClick( e: Event ): void {\n\t\tif ( e.target === this && 'yes' === this.getAttribute( 'overlay-click-close' ) ) {\n\t\t\te.preventDefault();\n\t\t\te.stopPropagation();\n\t\t\tthis.close();\n\t\t}\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPModalElement } from './tp-modal';\n\n/**\n * TP Modal Close.\n */\nexport class TPModalCloseElement extends HTMLElement {\n\t/**\n\t * Connected callback.\n\t */\n\tconnectedCallback(): void {\n\t\tconst button: HTMLButtonElement | null = this.querySelector( 'button' );\n\t\tbutton?.addEventListener( 'click', this.closeModal.bind( this ) );\n\t}\n\n\t/**\n\t * Close the modal.\n\t */\n\tcloseModal(): void {\n\t\tconst modal: TPModalElement | null = this.closest( 'tp-modal' );\n\t\tmodal?.close();\n\t}\n}\n","/**\n * Styles.\n */\nimport './style.scss';\n\n/**\n * Components.\n */\nimport { TPModalElement } from './tp-modal';\nimport { TPModalCloseElement } from './tp-modal-close';\n\n/**\n * Register Components.\n */\ncustomElements.define( 'tp-modal', TPModalElement );\ncustomElements.define( 'tp-modal-close', TPModalCloseElement );\n"],"names":["TPModalElement","HTMLElement","constructor","super","document","querySelector","appendChild","this","connectedCallback","addEventListener","handleClick","bind","open","setAttribute","close","removeAttribute","e","target","getAttribute","preventDefault","stopPropagation","TPModalCloseElement","button","closeModal","modal","closest","customElements","define"],"sourceRoot":""}

package/dist/modal/style.css

@@ -0,0 +1 @@
+tp-modal{display:none;background-color:rgba(0,0,0,.5);backdrop-filter:blur(2px);position:fixed;height:100%;width:100%;left:0;top:0;z-index:99;max-width:100%;overflow-y:auto;padding:20px;box-sizing:border-box}tp-modal[open]{display:flex}tp-modal-close{position:absolute;top:20px;right:20px}tp-modal-content{display:block;min-width:0;margin:auto;padding:20px;background-color:#fff;max-width:80ch}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@travelopia/web-components",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Accessible web components for the modern web",
   "scripts": {
     "build": "webpack --config ./webpack.config.js --mode production --env=production",
@@ -30,5 +30,9 @@
     "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4",
     "webpack-notifier": "^1.15.0"
+  },
+  "exports": {
+    "./*": "./dist/*",
+    "./package.json": "./package.json"
   }
 }

package/.browserslistrc

@@ -1 +0,0 @@
-since 2019

package/.editorconfig

@@ -1,18 +0,0 @@
-# WordPress Coding Standards
-# https://make.wordpress.org/core/handbook/coding-standards/
-
-root = true
-
-[*]
-charset = utf-8
-end_of_line = lf
-insert_final_newline = true
-trim_trailing_whitespace = true
-indent_style = tab
-
-[{.jshintrc,*.json,*.yml,*.neon}]
-indent_style = space
-indent_size = 2
-
-[*.txt]
-end_of_line = crlf

package/.eslintignore

@@ -1,3 +0,0 @@
-node_modules
-dist
-vendor

package/.eslintrc.json

@@ -1,14 +0,0 @@
-{
-  "extends": [ "plugin:@wordpress/eslint-plugin/recommended-with-formatting" ],
-  "overrides": [
-    {
-      "files": ["*.ts"],
-      "rules": {
-        "no-undef": "off",
-        "no-unused-vars": "off",
-        "import/no-unresolved": "off",
-        "import/no-extraneous-dependencies": "off"
-      }
-    }
-  ]
-}

package/.gitignore

@@ -1,24 +0,0 @@
-# --- Windows and Mac files
-[Tt]humbs.db
-.DS_Store
-
-# --- Packages
-node_modules
-vendor
-
-# --- Root
-/*
-!.browserslistrc
-!.editorconfig
-!.eslintignore
-!.eslintrc.json
-!.gitignore
-!LICENSE
-!package.json
-!package-lock.json
-!README.md
-!tsconfig.json
-!webpack.config.js
-
-# --- Components
-!src

package/tsconfig.json

@@ -1,22 +0,0 @@
-{
-  "compilerOptions": {
-    "strict": true,
-    "noImplicitAny": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "strictNullChecks": true,
-    "strictFunctionTypes": true,
-    "strictBindCallApply": true,
-    "strictPropertyInitialization": true,
-    "noImplicitThis": true,
-    "alwaysStrict": true,
-    "noImplicitReturns": true,
-    "module": "es6",
-    "target": "es6",
-    "jsx": "react-jsx",
-    "allowJs": true,
-    "moduleResolution": "node",
-    "sourceMap": true,
-    "allowSyntheticDefaultImports": true
-  }
-}

package/webpack.config.js

@@ -1,88 +0,0 @@
-// External dependencies.
-const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
-const WebpackNotifierPlugin = require( 'webpack-notifier' );
-const TerserPlugin = require( 'terser-webpack-plugin' );
-
-// Config.
-module.exports = ( env ) => {
-	// Build configuration.
-	const buildConfig = {
-		entry: {
-			modal: './src/modal/index.ts',
-		},
-		module: {
-			rules: [
-				{
-					test: /\.tsx?$/,
-					use: 'ts-loader',
-					exclude: /node_modules/,
-				},
-				{
-					test: /\.(sa|sc|c)ss$/,
-					use: [
-						MiniCssExtractPlugin.loader,
-						{
-							loader: 'css-loader',
-							options: {
-								url: false,
-								sourceMap: false,
-							},
-						},
-						{
-							loader: 'postcss-loader',
-						},
-						{
-							loader: 'sass-loader',
-							options: {
-								sassOptions: {
-									outputStyle: 'compressed',
-								},
-							},
-						},
-					],
-				},
-			],
-		},
-		resolve: {
-			extensions: [ '*', '.js', '.ts', '.tsx' ],
-		},
-		output: {
-			path: __dirname,
-			filename: `dist/[name]/index.js`,
-			publicPath: '/',
-		},
-		optimization: {
-			removeEmptyChunks: true,
-			minimize: true,
-			minimizer: [ new TerserPlugin( {
-				parallel: true,
-				terserOptions: {
-					format: {
-						comments: false,
-					},
-				},
-				extractComments: false,
-			} ) ],
-		},
-		plugins: [
-			new MiniCssExtractPlugin( {
-				filename: `dist/[name]/style.css`,
-			} ),
-		],
-		performance: {
-			hints: false,
-		},
-		devtool: 'source-map',
-	};
-
-	// Development environment.
-	if ( 'development' in env ) {
-		buildConfig.plugins.push( new WebpackNotifierPlugin( {
-			title: 'Build',
-			alwaysNotify: true,
-		} ) );
-	}
-
-	// Return config.
-	return [ buildConfig ];
-};