@ptcwebops/ptcw-design 6.2.22-beta → 6.2.22

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/cjs/ptc-collapse-list.cjs.entry.js

@@ -1,512 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-63ddc79c.js');
-const utils = require('./utils-ad441b07.js');
-
-const info = `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13">
-    <defs>
-        <style>
-            .cls-1,.cls-4{fill:none}.cls-1{stroke:#a6adb4;stroke-width:.7px}.cls-2{fill:#a6adb4;font-size:10px;font-family:Bender-BoldItalic,Bender;font-weight:700;font-style:italic;letter-spacing:.035em}.cls-3{stroke:none}
-        </style>
-    </defs>
-    <g id="info" transform="translate(-211 -479)">
-        <g id="Ellipse_6" class="cls-1" data-name="Ellipse 6" transform="translate(211 479)">
-            <circle cx="6.5" cy="6.5" r="6.5" class="cls-3"/>
-            <circle cx="6.5" cy="6.5" r="6.15" class="cls-4"/>
-        </g>
-        <text id="i" class="cls-2" transform="translate(216 480)">
-            <tspan x="-.56" y="9">i</tspan>
-        </text>
-    </g>
-</svg>
-`;
-
-const infoGreen = `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13">
-    <defs>
-        <style>
-          .acls-1,.acls-4{fill:none}.acls-1{stroke:#74c34d;stroke-width:.7px}.acls-2{fill:#74c34d;font-size:10px;font-family:Bender-BoldItalic,Bender;font-weight:700;font-style:italic;letter-spacing:.035em}.acls-3{stroke:none}
-        </style>
-    </defs>
-    <g id="info" transform="translate(-211 -479)">
-        <g id="Ellipse_6" class="acls-1" data-name="Ellipse 6" transform="translate(211 479)">
-            <circle cx="6.5" cy="6.5" r="6.5" class="acls-3"/>
-            <circle cx="6.5" cy="6.5" r="6.15" class="acls-4"/>
-        </g>
-        <text id="i" class="acls-2" transform="translate(216 480)">
-            <tspan x="-.56" y="9">i</tspan>
-        </text>
-    </g>
-</svg>
-`;
-
-const ptcCollapseListCss = "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;height:100%}.container{border-right:1px solid rgba(112, 112, 112, 0.25);position:relative;height:100%}.container>ul{overflow:visible}a{transition:color ease-out 250ms}ul{transition:max-height ease-out 250ms, padding ease-out 250ms;overflow:hidden;list-style:none;padding:0;margin:0}li{cursor:pointer}.level-1>ul{max-height:0}.level-1>ul>li{margin:var(--ptc-element-spacing-03) 0}.level-1>ul>li:first-child{margin-top:var(--ptc-element-spacing-05)}.level-1>ul>li:last-child{margin-bottom:10px}.level-2>ul,.level-3>ul,.level-4>ul,.level-5>ul{max-height:0}.level-2>ul>li,.level-3>ul>li,.level-4>ul>li,.level-5>ul>li{margin:var(--ptc-element-spacing-02) 0}.level-2>ul{padding-left:2.25rem}.level-3>ul{padding-left:var(--ptc-element-spacing-09)}.level-4>ul{padding-left:3.75rem}.level-5>ul{padding-left:4.5rem}.level-1{position:relative}.level-1>a{position:relative;padding:var(--ptc-element-spacing-04) var(--ptc-element-spacing-05) 17.5px 0;display:block;font-size:var(--ptc-font-size-small);letter-spacing:0.45px;font-weight:var(--ptc-font-weight-extrabold);color:var(--color-gray-12);text-decoration:none;border-bottom:1px solid rgba(112, 112, 112, 0.25)}.level-1>a:hover,.level-1>a:active,.level-1>a:focus{text-decoration:none}.level-1>a:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}.level-1>a>icon-asset{transition:transform var(--ptc-ease-out) var(--ptc-transition-medium), padding var(--ptc-ease-out) var(--ptc-transition-medium);position:absolute;right:20px;padding-top:2px}.level-1>a:after{content:\"\";display:block;position:absolute;bottom:-2px;left:0;height:3px;width:40px;background-color:var(--color-green-07);transition:background-color var(--ptc-ease-out) var(--ptc-transition-medium)}.level-1.expanded a>icon-asset{transform:rotate(-180deg);padding-top:0}.level-1.expanded a>ul{padding-top:14px}.level-1.expanded a:after{background-color:var(--color-gray-11)}.level-1>ul{padding-top:0}.level-1:first-child>a{padding-top:var(--ptc-element-spacing-05)}.level-2,.level-3,.level-4,.level-5{position:relative}.level-2>a,.level-3>a,.level-4>a,.level-5>a{font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-medium);letter-spacing:0.4px;color:var(--color-gray-10);text-decoration:none;display:inline-block;margin-left:var(--ptc-element-spacing-05);margin-right:6px}.level-2>a:hover,.level-2>a:active,.level-3>a:hover,.level-3>a:active,.level-4>a:hover,.level-4>a:active,.level-5>a:hover,.level-5>a:active{font-weight:var(--ptc-font-weight-extrabold);color:var(--color-green-07);text-decoration:none}.level-2>a:focus-visible,.level-3>a:focus-visible,.level-4>a:focus-visible,.level-5>a:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}.level-2 .expander-icon,.level-3 .expander-icon,.level-4 .expander-icon,.level-5 .expander-icon{position:absolute;left:-18px;top:2px}.level-2 .expander-icon:focus-visible,.level-3 .expander-icon:focus-visible,.level-4 .expander-icon:focus-visible,.level-5 .expander-icon:focus-visible{border-radius:8px;border:5px solid var(--keyboard-nav-outline);outline:none;top:-5px}.level-3:before,.level-4:before,.level-5:before{position:absolute;content:\"\";width:2rem;height:1px;display:block;left:0;top:9px;background-color:var(--color-gray-02)}.level-3:before{width:2rem;left:-2.25rem}.level-4:before{width:2.75rem;left:-3rem}.level-5:before{width:3.5rem;left:-3.75rem}.search-box{display:flex;width:100%}.search-box input[type=text]{font-family:var(--ptc-font-latin);padding:var(--ptc-element-spacing-02) var(--ptc-element-spacing-08) var(--ptc-element-spacing-02) var(--ptc-element-spacing-04);font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-regular);color:var(--color-gray-12);box-shadow:var(--ptc-shadow-x-small);border:solid 1px var(--color-gray-06);transition:border var(--ptc-transition-medium) var(--ptc-ease-out), box-shadow var(--ptc-transition-medium) var(--ptc-ease-out);background-color:var(--color-white);width:100%;margin-right:var(--ptc-element-spacing-07)}.search-box input[type=text]::-ms-clear{display:none}.search-box input[type=text]:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}.search-box input[type=text]::placeholder{color:var(--color-gray-07)}.icon-wrapper{width:32px;display:inline-flex;justify-content:center;align-items:center}.icon-wrapper .active-icon{display:none}.icon-wrapper .inactive-icon{display:inline}.icon-wrapper:hover .active-icon{display:inline}.icon-wrapper:hover .inactive-icon{display:none}.popup{display:inline-flex;width:256px}.popup i{margin-right:var(--ptc-element-spacing-02)}ptc-tooltip .wrapper-content.sc-ptc-tooltip{display:inline-flex;justify-content:center}.search-box-wrapper .search-box{margin-left:var(--ptc-element-spacing-01)}";
-
-class CollapseListItem {
-}
-const PtcCollapseList = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.itemSelected = index.createEvent(this, "itemSelected", 7);
-    this.itemExpanded = index.createEvent(this, "itemExpanded", 7);
-    this.textChanged = index.createEvent(this, "textChanged", 7);
-    this.inputUpdated = index.createEvent(this, "inputUpdated", 7);
-    this.ready = index.createEvent(this, "ready", 7);
-    this.viewUpdated = index.createEvent(this, "viewUpdated", 7);
-    this.changed = index.createEvent(this, "changed", 7);
-    this.data = undefined;
-    this.searchText = undefined;
-    this.showSearchBar = true;
-    this.header = undefined;
-    this.trackerId = undefined;
-    this.selectedValue = undefined;
-    this.selectedItems = undefined;
-    this.hashMap = undefined;
-    this.debouncedUpdatedEvent = undefined;
-    this.refreshBuffer = undefined;
-    this.listItems = undefined;
-    this.placeholderText = undefined;
-    this.debounceUpdateDelay = undefined;
-    this.allowMultiSelect = true;
-  }
-  componentWillLoad() {
-    this.loadListItems();
-    this.selectedItems = [];
-  }
-  componentDidLoad() {
-    this.ready.emit({
-      sender: this.el,
-      tree: this.data,
-      search: this.searchText
-    });
-    let event = () => {
-      this.changed.emit({
-        sender: this.el,
-        selectedValue: this.selectedValue,
-        selectedItems: this.selectedItems,
-        search: this.searchText
-      });
-    };
-    this.debouncedUpdatedEvent = utils.debounce(event, this.debounceUpdateDelay, this);
-    this.openList();
-  }
-  openList() {
-    var _a;
-    const listitem = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.listOpen');
-    listitem.forEach((item) => {
-      if (item.classList.contains('listOpen')) {
-        item === null || item === void 0 ? void 0 : item.classList.add('expanded');
-        const ulElement = item === null || item === void 0 ? void 0 : item.querySelector('ul');
-        if (ulElement) {
-          ulElement.style.maxHeight = `${ulElement.scrollHeight}px`;
-        }
-      }
-    });
-  }
-  componentDidUpdate() {
-    this.viewUpdated.emit({
-      sender: this.el,
-      tree: this.data,
-      search: this.searchText
-    });
-  }
-  onItemSelectedHandler(event) {
-    this.itemSelected.emit({
-      event: event,
-      sender: event ? event.target : this.el,
-      selectedValue: this.selectedValue,
-      selectedItems: this.selectedItems,
-      tree: this.data
-    });
-    this.fireChangedEvent();
-  }
-  onInputUpdated(event) {
-    let input = event.target;
-    this.searchText = input.value;
-    this.inputUpdated.emit({
-      event: event,
-      sender: input,
-      selectedValue: this.selectedValue,
-      selectedItems: this.selectedItems,
-      tree: this.data,
-      search: this.searchText
-    });
-    this.fireChangedEvent();
-  }
-  onItemExpandedHandler(event) {
-    this.itemExpanded.emit({
-      event: event,
-      sender: event ? event.target : this.el,
-      selectedValue: this.selectedValue,
-      selectedItems: this.selectedItems,
-      tree: this.data
-    });
-  }
-  fireChangedEvent() {
-    this.debouncedUpdatedEvent();
-  }
-  loadListItems() {
-    let counter = 0;
-    this.hashMap = {};
-    if (!this.data) {
-      let dom = utils.MapDOM(this.el);
-      if (dom.collapseListItem) {
-        this.data = new Array();
-        let buildChildren = (arr, outArr) => {
-          arr.map((z) => {
-            var newItem = new CollapseListItem();
-            newItem.isExternalLink = z.linkHref ? true : false;
-            newItem.trackerId = z.trackerId ? z.trackerId : `${this.trackerId}-list-item-${counter++}`;
-            if (z.linkHref) {
-              newItem.href = z.linkHref;
-              newItem.target = z.linkTarget;
-              newItem.title = z.linkTitle;
-              newItem.text = z.facetDisplay;
-              newItem.id = utils.generateUUID();
-            }
-            else {
-              newItem.id = utils.generateUUID();
-              newItem.text = z.facetDisplay;
-              newItem.name = z.facetName;
-              newItem.value = z.facetValue;
-              newItem.category = z.category;
-              newItem.allowMultiSelect = z.allowMultiSelect != 'false';
-              newItem.enableSearch = z.enableSearch == 'true';
-              newItem.searchBoxPlaceholder = z.placeholderText;
-              newItem.tooltip = z.tooltip;
-              this.setUpCategory(newItem.category, newItem.allowMultiSelect);
-              // Ensure listOpened is set based on is-list-opened attribute
-              newItem.listOpened = z.hasOwnProperty('listOpened');
-            }
-            if (z.collapseListItem) {
-              newItem.children = new Array();
-              if (!Array.isArray(z.collapseListItem)) {
-                let tempArr = new Array();
-                tempArr.push(z.collapseListItem);
-                buildChildren(tempArr, newItem.children);
-              }
-              else {
-                buildChildren(z.collapseListItem, newItem.children);
-              }
-            }
-            this.hashMap[newItem.id] = newItem;
-            outArr.push(newItem);
-          });
-        };
-        this.setUpCategory('default', true);
-        buildChildren(dom.collapseListItem, this.data);
-      }
-    }
-  }
-  setUpCategory(name, allowMultiSelect) {
-    if (!this.selectedValue) {
-      this.selectedValue = {};
-    }
-    if (name && !this.selectedValue[name]) {
-      this.selectedValue[name] = {
-        name: name,
-        items: new Array(),
-        allowMultiSelect: allowMultiSelect
-      };
-    }
-  }
-  collapseAllFirstLevelItems(exclude) {
-    let items = this.el.shadowRoot.querySelectorAll('.level-1');
-    items.forEach((z) => {
-      if (z.classList.contains('expanded') && z != exclude) {
-        z.classList.remove('expanded');
-      }
-    });
-  }
-  updateExpandedItems() {
-    const redraw = (timestamp) => {
-      if (!this.refreshBuffer) {
-        this.refreshBuffer = timestamp;
-      }
-      const elapsed = timestamp - this.refreshBuffer;
-      let items = this.el.shadowRoot.querySelectorAll('li');
-      items.forEach((z) => {
-        let ul = z.querySelector(':scope > ul');
-        if (ul) {
-          if (!z.classList.contains('expanded')) {
-            ul.style.removeProperty('max-height');
-            let childAnchorItems = ul.querySelectorAll('a');
-            if (childAnchorItems) {
-              childAnchorItems.forEach((child) => {
-                if (child) {
-                  child.tabIndex = -1;
-                }
-              });
-            }
-            let childInputsItems = ul.querySelectorAll('input');
-            if (childInputsItems) {
-              childInputsItems.forEach((child) => {
-                if (child) {
-                  child.tabIndex = -1;
-                }
-              });
-            }
-          }
-          else {
-            ul.style.maxHeight = ul.scrollHeight + "px";
-            let level1Parent = ul.closest('.level-1');
-            if (level1Parent) {
-              if (level1Parent.classList.contains('expanded')) {
-                if (ul.childNodes) {
-                  ul.childNodes.forEach((child) => {
-                    if (child.children[0] && child.children[0].tagName != 'DIV') {
-                      child.children[0].setAttribute('tabindex', '0');
-                    }
-                  });
-                }
-              }
-            }
-            let childInputsItems = ul.querySelectorAll('input');
-            if (childInputsItems) {
-              childInputsItems.forEach((child) => {
-                if (child) {
-                  child.tabIndex = 0;
-                }
-              });
-            }
-          }
-        }
-      });
-      if (elapsed < 2500) {
-        window.requestAnimationFrame(redraw);
-      }
-      else {
-        this.refreshBuffer = undefined;
-      }
-    };
-    if (!this.refreshBuffer) {
-      window.requestAnimationFrame(redraw);
-    }
-    else {
-      this.refreshBuffer = undefined;
-    }
-  }
-  updateSelectedItemStatus(uuid) {
-    var _a;
-    let selectedItem = this.hashMap[uuid];
-    if (selectedItem && selectedItem.value) {
-      let categoryName = (_a = selectedItem.category) !== null && _a !== void 0 ? _a : 'default';
-      if (!this.selectedValue[categoryName]) {
-        this.setUpCategory(categoryName, selectedItem.allowMultiSelect == true);
-      }
-      let items = this.selectedValue[categoryName].items;
-      if (items.indexOf(selectedItem.value) < 0) {
-        if (this.selectedValue[categoryName].allowMultiSelect) {
-          items.push(selectedItem.value);
-        }
-        else {
-          this.selectedItems = this.selectedItems.filter((z) => { return z.value != items[0]; });
-          items = [selectedItem.value];
-        }
-        this.selectedItems.push(selectedItem);
-      }
-      else {
-        items = items.filter((z) => { return z != selectedItem.value; });
-        this.selectedItems = this.selectedItems.filter((z) => { return z.value != selectedItem.value; });
-      }
-      this.selectedValue[categoryName].items = items;
-    }
-  }
-  unSelectItem(uuid) {
-    var _a;
-    let selectedItem = this.hashMap[uuid];
-    if (selectedItem && selectedItem.value) {
-      let categoryName = (_a = selectedItem.category) !== null && _a !== void 0 ? _a : 'default';
-      if (!this.selectedValue[categoryName]) {
-        this.setUpCategory(categoryName, selectedItem.allowMultiSelect == true);
-      }
-      let items = this.selectedValue[categoryName].items;
-      if (items.indexOf(selectedItem.value) > -1) {
-        items = items.filter((z) => { return z != selectedItem.value; });
-        this.selectedItems = this.selectedItems.filter((z) => { return z.value != selectedItem.value; });
-      }
-      this.selectedValue[categoryName].items = items;
-    }
-  }
-  selectItem(uuid) {
-    var _a;
-    let selectedItem = this.hashMap[uuid];
-    if (selectedItem && selectedItem.value) {
-      let categoryName = (_a = selectedItem.category) !== null && _a !== void 0 ? _a : 'default';
-      if (!this.selectedValue[categoryName]) {
-        this.setUpCategory(categoryName, selectedItem.allowMultiSelect == true);
-      }
-      let items = this.selectedValue[categoryName].items;
-      if (items.indexOf(selectedItem.value) < 0) {
-        if (this.selectedValue[categoryName].allowMultiSelect) {
-          items.push(selectedItem.value);
-        }
-        else {
-          items = [selectedItem.value];
-        }
-        this.selectedItems.push(selectedItem);
-      }
-      this.selectedValue[categoryName].items = items;
-    }
-  }
-  getItemByValue(value) {
-    let result;
-    if (this.hashMap) {
-      for (const [_, v] of Object.entries(this.hashMap)) {
-        let item = v;
-        if (item.value == value) {
-          result = item;
-          break;
-        }
-      }
-    }
-    return result;
-  }
-  onItemFilterSearchUpdate(e) {
-    if (e && e.target) {
-      let input = e.target;
-      let search = input.value;
-      if (input) {
-        let items = input.closest('ul').querySelectorAll('li:not(.search-box-wrapper)');
-        if (search && search.length > 0) {
-          items.forEach((item) => {
-            var _a;
-            let content = (_a = item === null || item === void 0 ? void 0 : item.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase();
-            if (content && content.indexOf(search) > -1) {
-              item.style.removeProperty("display");
-            }
-            else {
-              item.style.display = "none";
-            }
-          });
-        }
-        else {
-          items.forEach((item) => {
-            item.style.removeProperty("display");
-          });
-        }
-      }
-      this.updateExpandedItems();
-    }
-  }
-  onItemLinkClick(event, uuid) {
-    if (event) {
-      event.preventDefault();
-    }
-    this.updateSelectedItemStatus(uuid);
-    this.onItemSelectedHandler(event);
-  }
-  onExpandClick(event, collapseParents) {
-    if (event) {
-      event.preventDefault();
-      let sender = event.currentTarget;
-      let root = sender.closest('.level-1');
-      let parent = sender.closest('li');
-      if (collapseParents) {
-        this.collapseAllFirstLevelItems(root);
-      }
-      if (parent) {
-        parent.classList.toggle("expanded");
-      }
-      if (sender.classList.contains('expander-icon')) {
-        let icon = parent.classList.contains('expanded') ? 'minus' : 'plus';
-        sender.querySelector('icon-asset').setAttribute('name', icon);
-      }
-      this.updateExpandedItems();
-    }
-    this.onItemExpandedHandler(event);
-  }
-  render() {
-    let renderToolTip = (tooltip) => {
-      if (tooltip) {
-        return (index.h("ptc-tooltip", { "text-display": "inline", mode: "wrapper", "z-index": "z-2", position: "bottom", description: '' }, index.h("div", { class: "icon-wrapper" }, index.h("i", { class: 'active-icon', innerHTML: infoGreen }), index.h("i", { class: 'inactive-icon', innerHTML: info })), index.h("span", { class: "popup", slot: "description" }, index.h("i", { innerHTML: infoGreen }), index.h("div", { class: "content", innerHTML: tooltip }))));
-      }
-    };
-    let renderLevel = (arr, level, searchOptions) => {
-      let levelClass = `level-${level} mf-listen`;
-      let tId = this.trackerId ? `${this.trackerId}-${levelClass}` : '';
-      return (index.h("ul", null, searchOptions &&
-        index.h("li", { class: "search-box-wrapper" }, index.h("div", { id: tId, class: "search-box mf-listen" }, index.h("input", { class: "search-box", id: "searchBoxId", type: "text", placeholder: searchOptions.placeholder, tabIndex: -1, onKeyUp: (e) => { this.onItemFilterSearchUpdate(e); }, onBlur: (e) => { this.onItemFilterSearchUpdate(e); } }))), arr.map((z) => {
-        let expandable = false;
-        let selectable = false;
-        let icon;
-        let searchOptions = undefined;
-        if (z.enableSearch) {
-          searchOptions = {
-            placeholder: z.searchBoxPlaceholder
-          };
-        }
-        if (level == 1) {
-          if (z.children) {
-            expandable = true;
-            selectable = false;
-            icon = (index.h("icon-asset", { type: "ptc", name: "chevron-down", color: "ptc-green", size: "medium" }));
-          }
-          else {
-            expandable = false;
-            selectable = true;
-            icon = (index.h("icon-asset", { type: "ptc", name: "plus", color: "ptc-green", size: "medium" }));
-          }
-        }
-        else if (level > 1) {
-          selectable = true;
-          if (z.children) {
-            expandable = true;
-            icon = (index.h("icon-asset", { type: "ptc", name: "plus", color: "gray", size: "xxx-small" }));
-          }
-          else {
-            expandable = false;
-          }
-        }
-        return (index.h("li", { id: z.trackerId, class: {
-            [levelClass]: true,
-            listOpen: z.listOpened
-          } }, getLink(z, icon, level, expandable, selectable), z.children ? renderLevel(z.children, level + 1, searchOptions) : ''));
-      })));
-    };
-    let getLink = (item, icon, level, expandable, selectable) => {
-      let clickEvent = (e) => {
-        if (expandable) {
-          this.onExpandClick(e, this.allowMultiSelect && level == 1);
-        }
-        else {
-          this.onItemLinkClick(e, item.id);
-        }
-      };
-      let tooltip = level == 1 ? item.tooltip : undefined;
-      let tabIndexValue = level == 1 ? 0 : -1;
-      if (item.isExternalLink) {
-        return (index.h("a", { href: item.href, id: item.id, target: item.target, title: item.title, tabindex: tabIndexValue }, icon, item.text, renderToolTip(tooltip)));
-      }
-      else if ((!expandable && selectable) || (expandable && !selectable)) {
-        return (index.h("a", { href: "#", id: item.id, title: item.text, onClick: clickEvent, tabindex: tabIndexValue }, icon, item.text, renderToolTip(tooltip)));
-      }
-      else {
-        return [
-          index.h("a", { class: "expander-icon", href: "#", id: item.id, onClick: (e) => { this.onExpandClick(e, false); }, tabindex: tabIndexValue }, icon),
-          index.h("a", { href: "#", title: item.text, id: item.id, onClick: (e) => { this.onItemLinkClick(e, item.id); }, tabindex: tabIndexValue }, item.text),
-          renderToolTip(tooltip)
-        ];
-      }
-    };
-    // Ignore search bar if the showSearchBar is false
-    if (!this.showSearchBar) {
-      return (index.h(index.Host, null, index.h("div", { class: "container" }, index.h("ptc-title", { type: 'h2', "title-size": "medium", "title-weight": "w-6", "text-align": 'left', upperline: "no-upperline" }, this.header), renderLevel(this.data, 1))));
-    }
-    return (index.h(index.Host, null, index.h("div", { class: "container" }, index.h("ptc-title", { type: 'h2', "title-size": "medium", "title-weight": "w-6", "text-align": 'left', upperline: "no-upperline" }, this.header), index.h("div", { id: `${this.trackerId}-search-box`, class: "search-box mf-listen" }, index.h("input", { type: "text", id: "searchBoxId", placeholder: this.placeholderText, onKeyUp: (e) => { this.onInputUpdated(e); } })), renderLevel(this.data, 1))));
-  }
-  async removeSelectedItem(value) {
-    let item = this.getItemByValue(value);
-    this.unSelectItem(item.id);
-    this.fireChangedEvent();
-  }
-  async addSelectedItem(value) {
-    let item = this.getItemByValue(value);
-    this.selectItem(item.id);
-  }
-  get el() { return index.getElement(this); }
-};
-PtcCollapseList.style = ptcCollapseListCss;
-
-exports.ptc_collapse_list = PtcCollapseList;

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;
-  }
-}