@ptcwebops/ptcw-design 6.4.37-beta → 6.5.0-upgrade

package/dist/types/utils/utils.d.ts

@@ -1,30 +1,35 @@
-export declare function format(first: string, middle: string, last: string): string;
-export declare function MapDOM(domElement: HTMLElement, selector?: string, toString?: boolean): any;
-export declare function generateUUID(): string;
-export declare function debounce(func: Function, wait: number, referer?: any): (e: any) => void;
-export declare function getFileExtension(filePath: string): string;
-export declare function getLanguageFromURL(): string;
-export declare function getSeoTagType(element: HTMLElement, defaultTag?: string): [string, HTMLElement];
-export declare function seoSlotReset(element: HTMLElement): void;
-export declare function equalizeHeights(selector: string, elem: HTMLElement): void;
-export declare function equalizeHeightsWithinShadow(selector: string, shadowRootOrHostElement: DocumentFragment | HTMLElement): void;
-export declare function nextUserInteractionEvent(sender?: any, limit?: number): Promise<any>;
-export declare function observeInView(hostEle: HTMLElement, selector: string, runOnce?: boolean): void;
-export declare function isHiddenUntilSupported(): boolean;
-export declare class RetryHandler {
-  private retries;
-  private delay;
-  constructor(retries?: number, delay?: number);
-  execute(dataLookupFn: () => Promise<void>): Promise<void>;
-  private isSetContentAvailable;
-}
-export declare class PreloaderDependency {
-  private dependencyPromiseResolve;
-  private dependencyPromiseReject;
-  constructor(preloader: HTMLPtcPreloaderSectionElement);
-  resolve: () => any;
-  reject: () => any;
-}
-export declare function CheckDarkFocusState(context: any, el: HTMLElement, classList?: string): void;
-export declare function isReducedMotion(): boolean;
-export declare function onReducedMotionChange(cb: (reduced: boolean) => void): () => void;
+export declare function format(first: string, middle: string, last: string): string;
+export declare function MapDOM(domElement: HTMLElement, selector?: string, toString?: boolean): any;
+export declare function generateUUID(): string;
+export declare function debounce(func: Function, wait: number, referer?: any): (e: any) => void;
+export declare function getFileExtension(filePath: string): string;
+export declare function getLanguageFromURL(): string;
+export declare function getSeoTagType(element: HTMLElement, defaultTag?: string): [string, HTMLElement];
+export declare function seoSlotReset(element: HTMLElement): void;
+export declare function equalizeHeights(selector: string, elem: HTMLElement): void;
+export declare function equalizeHeightsWithinShadow(selector: string, shadowRootOrHostElement: DocumentFragment | HTMLElement): void;
+export declare function nextUserInteractionEvent(sender?: any, limit?: number): Promise<any>;
+export declare function observeInView(hostEle: HTMLElement, selector: string, runOnce?: boolean): void;
+export declare function isHiddenUntilSupported(): boolean;
+export declare class RetryHandler {
+    private retries;
+    private delay;
+    constructor(retries?: number, delay?: number);
+    execute(dataLookupFn: () => Promise<void>): Promise<void>;
+    private isSetContentAvailable;
+}
+declare global {
+    interface HTMLPtcPreloaderSectionElement extends HTMLElement {
+        registerDependency(promise: Promise<boolean>): void;
+    }
+}
+export declare class PreloaderDependency {
+    private dependencyPromiseResolve;
+    private dependencyPromiseReject;
+    constructor(preloader: HTMLPtcPreloaderSectionElement);
+    resolve: () => any;
+    reject: () => any;
+}
+export declare function CheckDarkFocusState(context: any, el: HTMLElement, classList?: string): void;
+export declare function isReducedMotion(): boolean;
+export declare function onReducedMotionChange(cb: (reduced: boolean) => void): () => void;

package/dist/types/utils/validation-messages.d.ts

@@ -1,4 +1,4 @@
-declare function loadValidationMessages(): Promise<void>;
-declare function getValidationMessageText(type: string, lang?: string): string;
-declare const ValidationMessages: Record<string, Record<string, string>>;
-export { loadValidationMessages, getValidationMessageText, ValidationMessages };
+declare function loadValidationMessages(): Promise<void>;
+declare function getValidationMessageText(type: string, lang?: string): string;
+declare const ValidationMessages: Record<string, Record<string, string>>;
+export { loadValidationMessages, getValidationMessageText, ValidationMessages };

package/loader/cdn.js

@@ -1,3 +1 @@
-
-module.exports = require('../dist/cjs/loader.cjs.js');
-module.exports.applyPolyfills = function() { return Promise.resolve() };
+module.exports = require('../dist/cjs/loader.cjs.js');

package/loader/index.cjs.js

@@ -1,3 +1 @@
-
-module.exports = require('../dist/cjs/loader.cjs.js');
-module.exports.applyPolyfills = function() { return Promise.resolve() };
+module.exports = require('../dist/cjs/loader.cjs.js');

package/loader/index.d.ts

@@ -8,10 +8,13 @@ export interface CustomElementsDefineOptions {
   ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
   rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
 }
-export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): Promise<void>;
+export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): void;
+/**
+ * @deprecated
+ */
 export declare function applyPolyfills(): Promise<void>;
 
-/** 
+/**
  * Used to specify a nonce value that corresponds with an application's CSP.
  * When set, the nonce will be added to all dynamically created script and style tags at runtime.
  * Alternatively, the nonce value can be set on a meta tag in the DOM head

package/loader/index.es2017.js

@@ -1,3 +1 @@
-
-export * from '../dist/esm/polyfills/index.js';
-export * from '../dist/esm/loader.js';
+export * from '../dist/esm/loader.js';

package/loader/index.js

@@ -1,4 +1,2 @@
-
 (function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
-export * from '../dist/esm/polyfills/index.js';
-export * from '../dist/esm/loader.js';
+export * from '../dist/esm/loader.js';

package/package.json

@@ -1,101 +1,73 @@
 {
   "name": "@ptcwebops/ptcw-design",
-  "version": "6.4.37-beta",
-  "description": "Stencil Component Starter",
+  "version": "6.5.0-upgrade",
+  "description": "PTC Frontend Framework",
   "main": "dist/index.cjs.js",
-  "module": "./dist/index.js",
-  "es2015": "dist/esm/index.mjs",
-  "es2017": "dist/esm/index.mjs",
-  "types": "dist/custom-elements/index.d.ts",
+  "module": "dist/index.js",
+  "types": "dist/types/index.d.ts",
   "collection": "dist/collection/collection-manifest.json",
   "collection:main": "dist/collection/index.js",
   "unpkg": "dist/ptcw-design/ptcw-design.esm.js",
+  "exports": {
+    ".": {
+      "import": "./dist/ptcw-design/ptcw-design.esm.js",
+      "require": "./dist/ptcw-design/ptcw-design.cjs.js"
+    },
+    "./my-component": {
+      "import": "./dist/components/my-component.js",
+      "types": "./dist/components/my-component.d.ts"
+    },
+    "./loader": {
+      "import": "./loader/index.js",
+      "require": "./loader/index.cjs",
+      "types": "./loader/index.d.ts"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/stenciljs/component-starter.git"
+  },
   "files": [
     "dist/",
     "loader/"
   ],
   "scripts": {
-    "build": "stencil build --docs",
-    "start": "stencil build --dev --watch --serve",
+    "build": "npm run build:tailwind && stencil build",
+    "build:tailwind": "npx @tailwindcss/cli -i ./src/global/tailwindcss/input.css -o ./src/global/tailwindcss/output.css",
+    "build:tailwind:watch": "npx @tailwindcss/cli -i ./src/global/tailwindcss/input.css -o ./src/global/tailwindcss/output.css --watch",
+    "start": "npm run build:tailwind && stencil build --dev --watch --serve",
     "test": "stencil test --spec --e2e",
     "test.watch": "stencil test --spec --e2e --watchAll",
-    "test.unit": "stencil test --spec",
-    "test.end-to-end": "stencil test --e2e",
-    "test.unit.watch": "stencil test --spec --watch",
     "generate": "stencil generate",
-    "prepare": "stencil build --docs",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "generate-story": "node scripts/storyGenerator",
-    "generate-unit-tests": "node scripts/unitTestGenerator",
-    "generate-bulk-tests": "node scripts/bulkTestGenerator",
-    "start:tailwind": "npx tailwindcss -i ./src/global/tailwindcss/input.css -o ./src/global/tailwindcss/output.css --watch",
-    "start:tailwind-stencil": "npx tailwindcss -i ./src/global/tailwindcss/input.css -o ./src/global/tailwindcss/output.css && npm run start",
-    "build:tailwind-stencil": "npx tailwindcss -i ./src/global/tailwindcss/input.css -o ./src/global/tailwindcss/output.css --minify && npm run build",
-    "format:prettier": "prettier --write \"src/**/*.{tsx,html,scss}\""
+    "build-storybook": "storybook build"
   },
-  "dependencies": {
-    "@daveberning/griddle": "^0.3.0",
-    "@material/checkbox": "^14.0.0",
-    "@material/form-field": "^14.0.0",
-    "@material/select": "^14.0.0",
-    "@material/textfield": "^14.0.0",
-    "@stencil/core": "^2.20.0",
+  "devDependencies": {
+    "@stencil-community/postcss": "^2.2.0",
+    "@stencil/core": "^4.37.0",
     "@stencil/postcss": "^2.1.0",
-    "@teamhive/lottie-player": "^1.0.0",
-    "@types/intl-tel-input": "^17.0.6",
+    "@stencil/sass": "^3.2.2",
+    "@stencil/storybook-plugin": "^0.1.0",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-interactions": "^8.6.14",
+    "@storybook/addon-links": "^8.6.14",
+    "@storybook/html-vite": "^8.6.14",
+    "@tailwindcss/cli": "^4.1.13",
+    "@types/jest": "^29.5.14",
+    "@types/jquery": "^3.5.33",
+    "@types/node": "^22.13.5",
     "autoprefixer": "^10.4.21",
-    "dayjs": "^1.11.13",
-    "focus-trap": "^7.6.4",
-    "intl-tel-input": "^18.2.1",
-    "npmrc": "^1.1.1",
+    "jest": "^29.7.0",
+    "jest-cli": "^29.7.0",
     "postcss": "^8.5.6",
-    "resize-observer-polyfill": "^1.5.1",
-    "swiper": "^9.1.1"
+    "puppeteer": "^24.3.0",
+    "sass": "^1.92.1",
+    "storybook": "^8.6.14",
+    "tailwindcss": "^4.1.13",
+    "vite": "^6.3.6"
   },
   "license": "MIT",
-  "devDependencies": {
-    "@babel/preset-env": "^7.22.4",
-    "@stencil/sass": "^1.4.1",
-    "@storybook/addon-designs": "^7.0.7",
-    "@storybook/addon-essentials": "^7.1.0-alpha.29",
-    "@storybook/addon-links": "^7.1.0-alpha.29",
-    "@storybook/blocks": "^7.1.0-alpha.29",
-    "@storybook/web-components": "^7.1.0-alpha.29",
-    "@storybook/web-components-webpack5": "^7.1.0-alpha.29",
-    "@types/jest": "^27.0.3",
-    "ejs": "^3.1.9",
-    "jest": "^27.4.5",
-    "jest-cli": "^27.4.5",
-    "lit": "^2.7.4",
-    "marked": "^5.1.0",
-    "mobile-select": "^1.1.2",
-    "node-html-parser": "^6.1.5",
-    "prettier": "3.6.2",
-    "puppeteer": "^10.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "stencil-inline-svg": "^1.1.0",
-    "storybook": "^7.1.0-alpha.29",
-    "tailwindcss": "^3.4.17",
-    "util": "^0.12.5",
-    "yargs": "^17.7.2"
-  },
-  "directories": {
-    "doc": "docs"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://@bitbucket.org/ptc-sitecore-workspace/ptc-design-system.git"
-  },
-  "keywords": [
-    "design system",
-    "web components",
-    "stenciljs"
-  ],
-  "author": "Yunfeng Qian",
-  "homepage": "https://bitbucket.org/ptc-sitecore-workspace/ptc-design-system#readme",
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
+  "dependencies": {
+    "@material/select": "^14.0.0"
   }
 }

package/readme.md

@@ -1,23 +1,111 @@
-![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)
+[![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)](https://stenciljs.com)
 
-# PTC Design 6.4.37-beta
+# Stencil Component Starter
 
-The site is the place for documentation on PTC Design System
+> This is a starter project for building a standalone Web Components using Stencil.
 
-## Building the Site
+Stencil is a compiler for building fast web apps using Web Components.
 
-To build the site from the source, ensure you're using the most recent versions of Node and Npm, and pull the latest from master. Next, run `npm install`, `npm run docs` to build the docs files and `npm run start` to launch the site in development mode.
+Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than runtime tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements specification.
 
-## Project Tools
+Stencil components are just Web Components, so they work in any major framework or with no framework at all.
 
-- stenciljs 2.20.0
-- Node 22.21.0
-- npm 10.9.4
-- jest 27.4.5
-- puppeteer 10.0.0
+## Getting Started
 
-## License
+To start building a new web component using Stencil, clone this repo to a new directory:
 
-## Release notes
+```bash
+git clone https://github.com/stenciljs/component-starter.git my-component
+cd my-component
+git remote rm origin
+```
 
-TODO: figure out how to do release notes with npm
+and run:
+
+```bash
+npm install
+npm start
+```
+
+To build the component for production, run:
+
+```bash
+npm run build
+```
+
+To run the unit tests for the components, run:
+
+```bash
+npm test
+```
+
+Need help? Check out our docs [here](https://stenciljs.com/docs/my-first-component).
+
+## Naming Components
+
+When creating new component tags, we recommend _not_ using `stencil` in the component name (ex: `<stencil-datepicker>`). This is because the generated component has little to nothing to do with Stencil; it's just a web component!
+
+Instead, use a prefix that fits your company or any name for a group of related components. For example, all of the [Ionic-generated](https://ionicframework.com/) web components use the prefix `ion`.
+
+## Using this component
+
+There are two strategies we recommend for using web components built with Stencil.
+
+The first step for all two of these strategies is to [publish to NPM](https://docs.npmjs.com/getting-started/publishing-npm-packages).
+
+You can read more about these different approaches in the [Stencil docs](https://stenciljs.com/docs/publishing).
+
+### Lazy Loading
+
+If your Stencil project is built with the [`dist`](https://stenciljs.com/docs/distribution) output target, you can import a small bootstrap script that registers all components and allows you to load individual component scripts lazily.
+
+For example, given your Stencil project namespace is called `my-design-system`, to use `my-component` on any website, inject this into your HTML:
+
+```html
+<script type="module" src="https://unpkg.com/my-design-system"></script>
+<!--
+To avoid unpkg.com redirects to the actual file, you can also directly import:
+https://unpkg.com/foobar-design-system@0.0.1/dist/foobar-design-system/foobar-design-system.esm.js
+-->
+<my-component first="Stencil" middle="'Don't call me a framework'" last="JS"></my-component>
+```
+
+This will only load the necessary scripts needed to render `<my-component />`. Once more components of this package are used, they will automatically be loaded lazily.
+
+You can also import the script as part of your `node_modules` in your applications entry file:
+
+```tsx
+import 'foobar-design-system/dist/foobar-design-system/foobar-design-system.esm.js';
+```
+
+Check out this [Live Demo](https://stackblitz.com/edit/vitejs-vite-y6v26a?file=src%2Fmain.tsx).
+
+### Standalone
+
+If you are using a Stencil component library with `dist-custom-elements`, we recommend importing Stencil components individually in those files where they are needed.
+
+To export Stencil components as standalone components make sure you have the [`dist-custom-elements`](https://stenciljs.com/docs/custom-elements) output target defined in your `stencil.config.ts`.
+
+For example, given you'd like to use `<my-component />` as part of a React component, you can import the component directly via:
+
+```tsx
+import 'foobar-design-system/my-component';
+
+function App() {
+  return (
+    <>
+      <div>
+        <my-component
+          first="Stencil"
+          middle="'Don't call me a framework'"
+          last="JS"
+        ></my-component>
+      </div>
+    </>
+  );
+}
+
+export default App;
+```
+
+Check out this [Live Demo](https://stackblitz.com/edit/vitejs-vite-b6zuds?file=src%2FApp.tsx).

package/dist/cjs/_commonjsHelpers-537d719a.js

@@ -1,20 +0,0 @@
-'use strict';
-
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-function createCommonjsModule(fn, basedir, module) {
-	return module = {
-		path: basedir,
-		exports: {},
-		require: function (path, base) {
-			return commonjsRequire();
-		}
-	}, fn(module, module.exports), module.exports;
-}
-
-function commonjsRequire () {
-	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
-}
-
-exports.commonjsGlobal = commonjsGlobal;
-exports.createCommonjsModule = createCommonjsModule;

package/dist/cjs/academic-form-test.cjs.entry.js

@@ -1,82 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-63ddc79c.js');
-
-const academicFormTestCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block}.form-wrapper{width:433px;display:flex;border-radius:3px;background:#fff;box-shadow:0px 2px 6px 0px rgba(0, 0, 0, 0.16);flex-direction:column;align-items:center;padding:24px 0px}.form-wrapper>form{max-width:277px}.form-wrapper>ptc-button{align-items:center}.form-wrapper .ptc-label{display:block;font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-bold);line-height:normal;margin-bottom:var(--ptc-element-spacing-04);position:relative;z-index:1;color:var(--color-gray-13)}";
-
-const AcademicForm = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.formData = {
-      email: "",
-      firstName: "",
-      lastName: "",
-      company: "",
-      country: "",
-      phone: "",
-      inquiryReason: "",
-      howhearselfreport: "",
-      policyChecked: false,
-    };
-  }
-  // private countryEle: HTMLPtcSelectElement;
-  // private inquiryreasonEle: HTMLPtcTextfieldElement;
-  // private howhearselfreport: HTMLPtcTextfieldElement;
-  componentDidLoad() {
-    this.formButton = this.el.querySelector(".form-submit");
-    this.formButton.addEventListener("click", this.handleSubmit.bind(this));
-    //get Email
-    this.emailEle = this.el.querySelector('ptc-textfield[field-id="contact-email"]');
-    this.firstNameEle = this.el.querySelector('ptc-textfield[field-id="contact-firstname"]');
-    this.lastNameEle = this.el.querySelector('ptc-textfield[field-id="contact-lastname"]');
-    this.companyEle = this.el.querySelector('ptc-textfield[field-id="company"]');
-    this.phoneEle = this.el.querySelector('ptc-textfield[field-id="contact-phone"]');
-    // this.countryEle = this.el.querySelector('ptc-select[field-id="contact-country"]')
-    // this.inquiryreasonEle = this.el.querySelector('ptc-textfield[field-id="contact-inquiry"]')
-    // this.howhearselfreport = this.el.querySelector('ptc-textfield[field-id="self-reporting"]')
-  }
-  handleInputChange(field, value) {
-    this.formData = Object.assign(Object.assign({}, this.formData), { [field]: value });
-  }
-  handleSubmit(event) {
-    event.preventDefault();
-    this.formData.email = this.emailEle.inputValue;
-    this.formData.firstName = this.firstNameEle.inputValue;
-    this.formData.lastName = this.lastNameEle.inputValue;
-    this.formData.company = this.companyEle.inputValue;
-    this.formData.phone = this.phoneEle.inputValue;
-    if (this.isValid()) {
-      const formSubmitEvent = new CustomEvent("formSubmit", {
-        detail: this.formData,
-        bubbles: true,
-      });
-      this.el.dispatchEvent(formSubmitEvent);
-    }
-    else {
-      console.log("Form validation failed");
-    }
-  }
-  isValid() {
-    const { email, firstName, lastName, company, country, phone, inquiryReason, howhearselfreport, policyChecked, } = this.formData;
-    const invalidLength = document.querySelectorAll(".invalid-field").length;
-    return (email !== "" &&
-      phone !== "" &&
-      firstName !== "" &&
-      lastName !== "" &&
-      company !== "" &&
-      country !== "" &&
-      inquiryReason !== "" &&
-      howhearselfreport != "" &&
-      policyChecked &&
-      invalidLength === 0);
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { class: "ptc-container ptc-section-standard u-flex u-flex-justify-center" }, index.h("div", { class: "form-wrapper" }, index.h("max-width-container", { "max-width": "277", breakpoint: 480 }, index.h("ptc-title", { type: "h2", "text-align": "center", "title-size": "x-small", "title-color": "gray", upperline: "no-upperline", "title-display": "inline-block", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-6", "is-plm-hub": "false" }, "Please fill out the form and a PTC sales representative will be in touch."), index.h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), index.h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), index.h("ptc-spacer", { breakpoint: "small", size: "small" }), index.h("ptc-spacer", { breakpoint: "small", size: "small" })), index.h("form", { onSubmit: (event) => this.handleSubmit(event) }, index.h("ptc-label", { class: "ptc-label" }, "Your Information"), index.h("ptc-textfield", { "field-id": "contact-firstname", "label-text": "First Name*", type: "text", "ptc-data-eloqua-name": "C_FirstName", "field-name": "firstname" }), index.h("ptc-textfield", { "field-id": "contact-lastname", "label-text": "Last Name*", type: "text", "ptc-data-eloqua-name": "C_LastName", "field-name": "lastname" }), index.h("ptc-textfield", { "field-id": "contact-email", "label-text": "Email*", type: "email", "alert-text": "Minimum Age Required", "alert-text-content": "If you are under the age of 14 years old, you must use your parent/guardian email address.", "ptc-data-eloqua-name": "C_EmailAddress", "field-name": "email" }), index.h("ptc-textfield", { "field-id": "confirm-email", "label-text": "Confirm your Email*", type: "email", "ptc-data-eloqua-name": "emailconfirmation", "field-name": "confirm-email", "custom-validation": "Email addresses must match." }), index.h("ptc-textfield", { "field-id": "contact-phone", "label-text": "Phone*", type: "tel", "ptc-data-eloqua-name": "C_BusPhone", "field-name": "phone" }), index.h("ptc-textfield", { "field-id": "contact-city", "label-text": "City*", type: "text", "ptc-data-eloqua-name": "C_City", "field-name": "contact-city" }), index.h("ptc-textfield", { "field-id": "contact-zipcode", "label-text": "Zip Code*", type: "text", "ptc-data-eloqua-name": "C_Zip_Postal", "field-name": "zipcode-field" }), index.h("ptc-select", { "field-id": "contact-country", label: "Country*", "ptc-data-eloqua-name": "C_Country", "field-name": "country" }, index.h("ul", { class: "mdc-list" }, index.h("li", { class: "mdc-list-item", "data-value": "" }, index.h("span", { class: "mdc-list-item__ripple" })), index.h("li", { class: "mdc-list-item", "data-value": "USA" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "USA")), index.h("li", { class: "mdc-list-item", "data-value": "Canada" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "Canada")), index.h("li", { class: "mdc-list-item", "data-value": "China" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "China")))), index.h("ptc-label", { class: "ptc-label" }, "School Information"), index.h("ptc-textfield", { "field-id": "institution", "label-text": "School/Institution Name*", type: "text", "ptc-data-eloqua-name": "C_Company", "field-name": "institution" }), index.h("ptc-textfield", { "field-id": "contact-email", "label-text": "School Level*", type: "email", "ptc-data-eloqua-name": "C_EmailAddress", "field-name": "email" }), index.h("ptc-textfield", { "field-id": "contact-email", "label-text": "Student Level*", type: "email", "ptc-data-eloqua-name": "gradeLevel1", "field-name": "email" }), index.h("ptc-select", { "field-id": "academic-description", label: "Role of User*", "ptc-data-eloqua-name": "description1", "field-name": "academic-description" }, index.h("ul", { class: "mdc-list" }, index.h("li", { class: "mdc-list-item", "data-value": "" }, index.h("span", { class: "mdc-list-item__ripple" })), index.h("li", { class: "mdc-list-item", "data-value": "USA" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "K-12 educator")), index.h("li", { class: "mdc-list-item", "data-value": "Canada" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "Professor")), index.h("li", { class: "mdc-list-item", "data-value": "China" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "K-12 student")))), index.h("ptc-textfield", { "field-id": "contact-city", "label-text": "Purpose of use*", type: "text", "ptc-data-eloqua-name": "C_City", "field-name": "contact-city" }), index.h("ptc-textfield", { "field-id": "academic-ofComputers", "label-text": "How many computers are you planning to install this software on?*", type: "text", "ptc-data-eloqua-name": "ofComputers1", "field-name": "academic-ofComputers" }), index.h("ptc-form-checkbox", { label: "I acknowledge that my personal details will be processed in accordance with PTC\u2019s privacy policy and that they may be shared with PTC Inc\u2019s subsidiaries for\r\n               the promotion of PTC\u2019s products and associated services. ", "checkbox-id": "test" }), index.h("ptc-button", { class: "form-submit", color: "ptc-quaternary", type: "submit", styles: ":host{align-self:flex-end; margin-top: 48px; display:block; float: right; width: fit-content;}" }, "Submit"))))));
-  }
-  get el() { return index.getElement(this); }
-};
-AcademicForm.style = academicFormTestCss;
-
-exports.academic_form_test = AcademicForm;