@ptcwebops/ptcw-design 6.3.22-beta → 6.3.22

package/dist/types/components.d.ts

@@ -172,8 +172,6 @@ export namespace Components {
          */
         "styles"?: string;
     }
-    interface ModalFormExample {
-    }
     interface MostPopularNews {
         "topTitle": string;
     }
@@ -688,7 +686,7 @@ export namespace Components {
         "backgroundColor": 'white' | 'gray';
         "containerType": 'large' | 'none' | '';
         "elevation": 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
-        "spacing": 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xxx-large' | 'xxx-large';
+        "spacing": 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'xxx-large';
         "styles"?: string;
     }
     interface PtcCountdown {
@@ -1028,6 +1026,7 @@ export namespace Components {
           * (optional) Injected CSS Styles
          */
         "styles"?: string;
+        "target": string;
         "trackerId"?: string;
         "variant": 'image' | 'text';
     }
@@ -1263,6 +1262,7 @@ export namespace Components {
           * Sets if popup should overlay
          */
         "fixed"?: boolean;
+        "focusBackElement": any;
         "headerOnlyBg"?: string;
         "headerOnlyText1"?: string;
         "headerOnlyText2"?: string;
@@ -1305,7 +1305,7 @@ export namespace Components {
         /**
           * Sets if popup should close if click on outside
          */
-        "size"?: 'sm' | 'md' | 'lg' | 'xl' | 'fit-content' | 'max' | 'sm-modal';
+        "size"?: 'sm' | 'md' | 'lg' | 'xl' | 'max' | 'sm-modal';
         /**
           * (optional) Injected CSS Styles
          */
@@ -1394,8 +1394,11 @@ export namespace Components {
     interface PtcNavPills {
     }
     interface PtcNavSkipToContent {
+        "appendSelector": string;
         "buttonText": string;
         "sectionId": string;
+        "xOffset": number;
+        "yOffset": number;
     }
     interface PtcNavSlider {
         /**
@@ -1560,7 +1563,7 @@ export namespace Components {
         /**
           * Paragraph Color
          */
-        "paraColor": 'primary-grey' | 'primary-green' | 'white' | 'gray-darker';
+        "paraColor": 'primary-grey' | 'white' | 'gray-darker';
         /**
           * line height
          */
@@ -1724,7 +1727,6 @@ export namespace Components {
          */
         "styles"?: string;
         "text": string | undefined;
-        "theme": 'standard' | 'light';
     }
     interface PtcPricingAddOnCard {
         /**
@@ -2051,6 +2053,7 @@ export namespace Components {
           * Query selector of page footer above which the related card rail will unstick
          */
         "footerQuerySelector": string;
+        "isVisible": boolean;
         "railTitle": string;
     }
     interface PtcResponsiveWrapper {
@@ -2454,25 +2457,79 @@ export namespace Components {
         "type": 'text-copy-with-background' | 'hero-footer-cta' | 'tab-cta-with-background' | 'case-studies';
     }
     interface PtcTextfield {
+        /**
+          * Alert Text
+         */
         "alertText": string;
+        /**
+          * Alert Text Content
+         */
         "alertTextContent": string;
+        /**
+          * Custom Validation - String
+         */
         "customValidation": (input: HTMLInputElement) => string;
+        /**
+          * Disable the field
+         */
         "disabled": boolean;
+        /**
+          * ID
+         */
         "fieldId": string;
+        /**
+          * input "name" value. e.g.: 'phone', 'email', 'firstname', 'lastname'
+         */
         "fieldName": string;
+        /**
+          * Validation text (red)
+         */
         "helpertext": string;
+        /**
+          * Ignore Blind Submit?
+         */
         "ignoreBlindSubmit": boolean;
+        /**
+          * Info Text (black)
+         */
         "infoText": string;
         "inputValue": string;
+        /**
+          * Label Text
+         */
         "labelText": string;
+        /**
+          * Place holder Text
+         */
         "placeholderText": string;
+        /**
+          * Eloqua Data Name (for the eloqua)
+         */
         "ptcDataEloquaName": string;
+        /**
+          * Eloqua Target Data Name (for the eloqua)
+         */
         "ptcDataTargetEloquaName": string;
+        /**
+          * Text counter limit
+         */
         "ptcMaxLength"?: number;
+        /**
+          * Is this a mandatory field?
+         */
         "required": boolean;
+        /**
+          * Inject styles for customization
+         */
         "styles": string;
         "syncCountry": (countryCode: string) => Promise<void>;
+        /**
+          * Text Field Form
+         */
         "textfieldForm": 'default' | 'email-signup';
+        /**
+          * text, button, email, file and etc. This value triggers different validation
+         */
         "type": string;
         "validateTextField": () => Promise<void>;
     }
@@ -2486,7 +2543,7 @@ export namespace Components {
         "vtagName"?: string;
     }
     interface PtcTheaterVideoModal {
-        "updateData": (data: any, currentModalIndex: any) => Promise<void>;
+        "updateData": (data: any, currentModalIndex: any, cardElement?: HTMLElement) => Promise<void>;
     }
     interface PtcTheaterVideoPlaylist {
         "cardElements": any;
@@ -2950,6 +3007,10 @@ export interface PtcTheaterVideoCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPtcTheaterVideoElement;
 }
+export interface PtcTheaterVideoModalCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLPtcTheaterVideoModalElement;
+}
 export interface PtcWhitePaperCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPtcWhitePaperElement;
@@ -3121,12 +3182,6 @@ declare global {
         prototype: HTMLMaxWidthContainerElement;
         new (): HTMLMaxWidthContainerElement;
     };
-    interface HTMLModalFormExampleElement extends Components.ModalFormExample, HTMLStencilElement {
-    }
-    var HTMLModalFormExampleElement: {
-        prototype: HTMLModalFormExampleElement;
-        new (): HTMLModalFormExampleElement;
-    };
     interface HTMLMostPopularNewsElement extends Components.MostPopularNews, HTMLStencilElement {
     }
     var HTMLMostPopularNewsElement: {
@@ -4049,7 +4104,6 @@ declare global {
         "jumbotron-sub-mune": HTMLJumbotronSubMuneElement;
         "list-item": HTMLListItemElement;
         "max-width-container": HTMLMaxWidthContainerElement;
-        "modal-form-example": HTMLModalFormExampleElement;
         "most-popular-news": HTMLMostPopularNewsElement;
         "my-component": HTMLMyComponentElement;
         "news-search-result": HTMLNewsSearchResultElement;
@@ -4373,8 +4427,6 @@ declare namespace LocalJSX {
          */
         "styles"?: string;
     }
-    interface ModalFormExample {
-    }
     interface MostPopularNews {
         "topTitle"?: string;
     }
@@ -4907,7 +4959,7 @@ declare namespace LocalJSX {
         "backgroundColor"?: 'white' | 'gray';
         "containerType"?: 'large' | 'none' | '';
         "elevation"?: 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
-        "spacing"?: 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xxx-large' | 'xxx-large';
+        "spacing"?: 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'xxx-large';
         "styles"?: string;
     }
     interface PtcCountdown {
@@ -5255,6 +5307,7 @@ declare namespace LocalJSX {
           * (optional) Injected CSS Styles
          */
         "styles"?: string;
+        "target"?: string;
         "trackerId"?: string;
         "variant"?: 'image' | 'text';
     }
@@ -5491,6 +5544,7 @@ declare namespace LocalJSX {
           * Sets if popup should overlay
          */
         "fixed"?: boolean;
+        "focusBackElement"?: any;
         "headerOnlyBg"?: string;
         "headerOnlyText1"?: string;
         "headerOnlyText2"?: string;
@@ -5538,7 +5592,7 @@ declare namespace LocalJSX {
         /**
           * Sets if popup should close if click on outside
          */
-        "size"?: 'sm' | 'md' | 'lg' | 'xl' | 'fit-content' | 'max' | 'sm-modal';
+        "size"?: 'sm' | 'md' | 'lg' | 'xl' | 'max' | 'sm-modal';
         /**
           * (optional) Injected CSS Styles
          */
@@ -5630,8 +5684,11 @@ declare namespace LocalJSX {
     interface PtcNavPills {
     }
     interface PtcNavSkipToContent {
+        "appendSelector"?: string;
         "buttonText"?: string;
         "sectionId"?: string;
+        "xOffset"?: number;
+        "yOffset"?: number;
     }
     interface PtcNavSlider {
         /**
@@ -5802,7 +5859,7 @@ declare namespace LocalJSX {
         /**
           * Paragraph Color
          */
-        "paraColor"?: 'primary-grey' | 'primary-green' | 'white' | 'gray-darker';
+        "paraColor"?: 'primary-grey' | 'white' | 'gray-darker';
         /**
           * line height
          */
@@ -5964,7 +6021,6 @@ declare namespace LocalJSX {
          */
         "styles"?: string;
         "text"?: string | undefined;
-        "theme"?: 'standard' | 'light';
     }
     interface PtcPricingAddOnCard {
         /**
@@ -6312,6 +6368,7 @@ declare namespace LocalJSX {
           * Query selector of page footer above which the related card rail will unstick
          */
         "footerQuerySelector"?: string;
+        "isVisible"?: boolean;
         "railTitle"?: string;
     }
     interface PtcResponsiveWrapper {
@@ -6717,24 +6774,78 @@ declare namespace LocalJSX {
         "type"?: 'text-copy-with-background' | 'hero-footer-cta' | 'tab-cta-with-background' | 'case-studies';
     }
     interface PtcTextfield {
+        /**
+          * Alert Text
+         */
         "alertText"?: string;
+        /**
+          * Alert Text Content
+         */
         "alertTextContent"?: string;
+        /**
+          * Custom Validation - String
+         */
         "customValidation"?: (input: HTMLInputElement) => string;
+        /**
+          * Disable the field
+         */
         "disabled"?: boolean;
+        /**
+          * ID
+         */
         "fieldId"?: string;
+        /**
+          * input "name" value. e.g.: 'phone', 'email', 'firstname', 'lastname'
+         */
         "fieldName"?: string;
+        /**
+          * Validation text (red)
+         */
         "helpertext"?: string;
+        /**
+          * Ignore Blind Submit?
+         */
         "ignoreBlindSubmit"?: boolean;
+        /**
+          * Info Text (black)
+         */
         "infoText"?: string;
         "inputValue"?: string;
+        /**
+          * Label Text
+         */
         "labelText"?: string;
+        /**
+          * Place holder Text
+         */
         "placeholderText"?: string;
+        /**
+          * Eloqua Data Name (for the eloqua)
+         */
         "ptcDataEloquaName"?: string;
+        /**
+          * Eloqua Target Data Name (for the eloqua)
+         */
         "ptcDataTargetEloquaName"?: string;
+        /**
+          * Text counter limit
+         */
         "ptcMaxLength"?: number;
+        /**
+          * Is this a mandatory field?
+         */
         "required"?: boolean;
+        /**
+          * Inject styles for customization
+         */
         "styles"?: string;
+        /**
+          * Text Field Form
+         */
         "textfieldForm"?: 'default' | 'email-signup';
+        /**
+          * text, button, email, file and etc. This value triggers different validation
+         */
         "type"?: string;
     }
     interface PtcTheaterVideo {
@@ -6748,6 +6859,7 @@ declare namespace LocalJSX {
         "vtagName"?: string;
     }
     interface PtcTheaterVideoModal {
+        "onModalClosed"?: (event: PtcTheaterVideoModalCustomEvent<any>) => void;
     }
     interface PtcTheaterVideoPlaylist {
         "cardElements"?: any;
@@ -7050,7 +7162,6 @@ declare namespace LocalJSX {
         "jumbotron-sub-mune": JumbotronSubMune;
         "list-item": ListItem;
         "max-width-container": MaxWidthContainer;
-        "modal-form-example": ModalFormExample;
         "most-popular-news": MostPopularNews;
         "my-component": MyComponent;
         "news-search-result": NewsSearchResult;
@@ -7233,7 +7344,6 @@ declare module "@stencil/core" {
             "jumbotron-sub-mune": LocalJSX.JumbotronSubMune & JSXBase.HTMLAttributes<HTMLJumbotronSubMuneElement>;
             "list-item": LocalJSX.ListItem & JSXBase.HTMLAttributes<HTMLListItemElement>;
             "max-width-container": LocalJSX.MaxWidthContainer & JSXBase.HTMLAttributes<HTMLMaxWidthContainerElement>;
-            "modal-form-example": LocalJSX.ModalFormExample & JSXBase.HTMLAttributes<HTMLModalFormExampleElement>;
             "most-popular-news": LocalJSX.MostPopularNews & JSXBase.HTMLAttributes<HTMLMostPopularNewsElement>;
             "my-component": LocalJSX.MyComponent & JSXBase.HTMLAttributes<HTMLMyComponentElement>;
             "news-search-result": LocalJSX.NewsSearchResult & JSXBase.HTMLAttributes<HTMLNewsSearchResultElement>;

package/dist/types/global/global.d.ts

@@ -0,0 +1,4 @@
+declare global {
+  var ptcLogger: any;
+}
+export {};

package/dist/types/utils/fef-logger.d.ts

@@ -0,0 +1,10 @@
+declare class PTCLogger {
+  private prefix;
+  private format;
+  log(message: any, ...args: any[]): void;
+  info(message: any, ...args: any[]): void;
+  warn(message: any, ...args: any[]): void;
+  error(message: any, ...args: any[]): void;
+}
+export declare const ptcLogger: PTCLogger;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ptcwebops/ptcw-design",
-  "version": "6.3.22-beta",
+  "version": "6.3.22",
   "description": "Stencil Component Starter",
   "main": "dist/index.cjs.js",
   "module": "./dist/index.js",
@@ -27,7 +27,10 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "generate-story": "node scripts/storyGenerator",
-    "generate-unit-tests": "node scripts/unitTestGenerator"
+    "generate-unit-tests": "node scripts/unitTestGenerator",
+    "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"
   },
   "dependencies": {
     "@daveberning/griddle": "^0.3.0",
@@ -68,6 +71,7 @@
     "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"
   },

package/readme.md

@@ -1,6 +1,6 @@
 ![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)
 
-# PTC Design 6.3.22-beta
+# PTC Design 6.3.22
 
 The site is the place for documentation on PTC Design System
 
@@ -17,7 +17,3 @@ To build the site from the source, ensure you're using the most recent versions
 - puppeteer 10.0.0
 
 ## License
-
-## Release notes
-
-TODO: figure out how to do release notes with npm

package/dist/cjs/modal-form-example.cjs.entry.js

@@ -1,94 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-63ddc79c.js');
-
-const modalFormExampleCss = ":host {\r\n  display: block;\r\n}\r\n\r\n.form-wrapper {\r\n  width: 371px;\r\n  display: flex;\r\n  border-radius: 3px;\r\n  background: #FFF;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  padding: 0px 32px;\r\n\r\n  @media only screen and (min-width: 360px) and (max-width: 479.55px) {\r\n    max-width: 360px;\r\n    width: 360px;\r\n  }\r\n\r\n  .button-wrapper {\r\n    display: flex;\r\n    justify-content: flex-end;\r\n    gap: 20px;\r\n    margin-top: 48px;\r\n    flex-wrap: wrap;\r\n  }\r\n}\r\n";
-
-const PtcForm = 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;
-    // this.formData.country = this.countryEle.inputValue;
-    // this.formData.inquiryReason= this.inquiryreasonEle.inputValue;
-    // this.formData.howhearselfreport = this.howhearselfreport.inputValue;
-    // console.log("get form Data: " + this.formData.email)
-    if (this.isValid()) {
-      const formSubmitEvent = new CustomEvent('formSubmit', {
-        detail: this.formData,
-        bubbles: true,
-      });
-      this.el.dispatchEvent(formSubmitEvent);
-      console.log('Form Submitted: ' + this.formData);
-    }
-    else {
-      console.log('Form validation failed');
-      console.log('Form Submitted: ' + this.formData.email, this.formData.firstName, this.formData.lastName, this.formData.company, this.formData.phone);
-    }
-  }
-  isValid() {
-    const { email, firstName, lastName, company, country, phone, inquiryReason, howhearselfreport, policyChecked } = this.formData;
-    const invalidLength = document.querySelectorAll('.invalid-field').length;
-    // console.log('invalid fields length: ' + invalidLength), check the select field
-    return (email !== '' &&
-      phone !== '' &&
-      firstName !== '' &&
-      lastName !== '' &&
-      company !== '' &&
-      country !== '' &&
-      inquiryReason !== '' &&
-      howhearselfreport != '' &&
-      policyChecked &&
-      invalidLength === 0);
-  }
-  render() {
-    const multiSelectItems = [
-      { text: 'Item 1', selected: false, ptcDataEloquaName: 'item_1', ptcDataTargetEloquaName: 'item_target-1' },
-      { text: 'Item 2', selected: false, ptcDataEloquaName: 'item_2', ptcDataTargetEloquaName: 'item_target-2' },
-      { text: 'Item 3', selected: false, ptcDataEloquaName: 'item_3', ptcDataTargetEloquaName: 'item_target-3' }
-    ];
-    return (index.h(index.Host, null, index.h("div", { class: "ptc-container u-flex u-flex-justify-center" }, index.h("div", { class: "form-wrapper" }, index.h("ptc-title", { "seo-compatibility-mode": true, "text-align": "left", "title-color": "gray", upperline: "no-upperline", "title-display": "inline-block", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-7", "is-plm-hub": "false", "title-size": "medium" }, index.h("h2", null, "PTC\u2019s PLM application suite combines the power of Windchill, the industry\u2019s #1 PLM software with Thingworx")), index.h("ptc-spacer", { size: "x-small", breakpoint: "small" }), index.h("ptc-spacer", { size: "small", breakpoint: "x-small" }), index.h("ptc-para", { "seo-compatibility-mode": true, "font-size": "x-small", "font-weight": "w-4", "para-margin": "margin-flush", "para-style": "main", "para-line-h": "line-height-densest" }, "PTC\u2019s market-leading, purpose-built IIoT platform. The suite offers a mix of Packages, Add-Ons, and Apps to best suit your business needs:"), index.h("ptc-spacer", { size: "x-small", breakpoint: "small" }), index.h("ptc-spacer", { size: "small", breakpoint: "x-small" }), index.h("max-width-container", { "max-width": "277", breakpoint: 480 }, index.h("ptc-title", { type: "h2", "text-align": "", "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-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": "company", "label-text": "Company*", type: "text", "ptc-data-eloqua-name": "C_Company", "field-name": "company" }), index.h("ptc-textfield", { "field-id": "contact-email", "label-text": "Email*", type: "email", "ptc-data-eloqua-name": "C_EmailAddress", "field-name": "email" }), index.h("ptc-textfield", { "field-id": "company-email", "label-text": "Company Email*", type: "email", "ptc-data-eloqua-name": "C_EmailAddress", "field-name": "companyemail" }), 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 placehoder-li", "data-value": "" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "Select a country")), 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-textfield", { "field-id": "contact-phone", "label-text": "Phone*", type: "tel", "ptc-data-eloqua-name": "C_BusPhone", "field-name": "phone" }), index.h("ptc-select", { label: "What information are you interested in?*", "ptc-data-eloqua-name": "Inquiry_Reason", "field-name": "inquiryreason", "field-id": "contact-inquiry" }, index.h("ul", { class: "mdc-list" }, index.h("li", { class: "mdc-list-item", "data-value": "Please select a value" }, index.h("span", { class: "mdc-list-item__ripple" })), index.h("li", { class: "mdc-list-item", "data-value": "Augmented Reality (AR)" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "Augmented Reality (AR)")), index.h("li", { class: "mdc-list-item", "data-value": "CAD" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "Computer Aided Design")), index.h("li", { class: "mdc-list-item", "data-value": "Retail(FlexPLM)" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "Fashion and Retail Product Lifecycle Management")))), index.h("ptc-multi-select", { items: multiSelectItems, "is-required": 'true' }), index.h("ptc-textfield", { "field-id": "Self-Reporting", "label-text": "How can we help you?*", type: "text", "ptc-data-eloqua-name": "HowHearSelfReport", "ptc-max-length": "100", "field-name": "howhearselfreport" }), index.h("ptc-form-checkbox", { label: "I agree to the policy", "checkbox-id": "test" }), index.h("div", { class: "button-wrapper" }, index.h("ptc-button", { class: "form-submit", color: "ptc-quaternary", type: "submit", styles: ":host{align-self:flex-end; display:block; float: left; width: fit-content;}" }, "Submit"), index.h("ptc-button", { class: "form-close", color: "ptc-tertiary", type: "button", styles: ":host{align-self:flex-end; display:block; float: left; width: fit-content;}" }, "Cancel")))))));
-  }
-  get el() { return index.getElement(this); }
-};
-PtcForm.style = modalFormExampleCss;
-
-exports.modal_form_example = PtcForm;

package/dist/collection/components/organism-bundles/form/modal-from-example/modal-form-example.css

@@ -1,26 +0,0 @@
-:host {
-  display: block;
-}
-
-.form-wrapper {
-  width: 371px;
-  display: flex;
-  border-radius: 3px;
-  background: #FFF;
-  flex-direction: column;
-  align-items: center;
-  padding: 0px 32px;
-
-  @media only screen and (min-width: 360px) and (max-width: 479.55px) {
-    max-width: 360px;
-    width: 360px;
-  }
-
-  .button-wrapper {
-    display: flex;
-    justify-content: flex-end;
-    gap: 20px;
-    margin-top: 48px;
-    flex-wrap: wrap;
-  }
-}