@ptcwebops/ptcw-design 6.2.22 → 6.2.23-beta

package/dist/esm/ptc-collapse-list.entry.js

@@ -0,0 +1,508 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-c83db688.js';
+import { d as debounce, M as MapDOM, b as generateUUID } from './utils-ff65c75b.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) {
+    registerInstance(this, hostRef);
+    this.itemSelected = createEvent(this, "itemSelected", 7);
+    this.itemExpanded = createEvent(this, "itemExpanded", 7);
+    this.textChanged = createEvent(this, "textChanged", 7);
+    this.inputUpdated = createEvent(this, "inputUpdated", 7);
+    this.ready = createEvent(this, "ready", 7);
+    this.viewUpdated = createEvent(this, "viewUpdated", 7);
+    this.changed = 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 = 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 = 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 = generateUUID();
+            }
+            else {
+              newItem.id = 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 (h("ptc-tooltip", { "text-display": "inline", mode: "wrapper", "z-index": "z-2", position: "bottom", description: '' }, h("div", { class: "icon-wrapper" }, h("i", { class: 'active-icon', innerHTML: infoGreen }), h("i", { class: 'inactive-icon', innerHTML: info })), h("span", { class: "popup", slot: "description" }, h("i", { innerHTML: infoGreen }), 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 (h("ul", null, searchOptions &&
+        h("li", { class: "search-box-wrapper" }, h("div", { id: tId, class: "search-box mf-listen" }, 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 = (h("icon-asset", { type: "ptc", name: "chevron-down", color: "ptc-green", size: "medium" }));
+          }
+          else {
+            expandable = false;
+            selectable = true;
+            icon = (h("icon-asset", { type: "ptc", name: "plus", color: "ptc-green", size: "medium" }));
+          }
+        }
+        else if (level > 1) {
+          selectable = true;
+          if (z.children) {
+            expandable = true;
+            icon = (h("icon-asset", { type: "ptc", name: "plus", color: "gray", size: "xxx-small" }));
+          }
+          else {
+            expandable = false;
+          }
+        }
+        return (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 (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 (h("a", { href: "#", id: item.id, title: item.text, onClick: clickEvent, tabindex: tabIndexValue }, icon, item.text, renderToolTip(tooltip)));
+      }
+      else {
+        return [
+          h("a", { class: "expander-icon", href: "#", id: item.id, onClick: (e) => { this.onExpandClick(e, false); }, tabindex: tabIndexValue }, icon),
+          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 (h(Host, null, h("div", { class: "container" }, 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 (h(Host, null, h("div", { class: "container" }, h("ptc-title", { type: 'h2', "title-size": "medium", "title-weight": "w-6", "text-align": 'left', upperline: "no-upperline" }, this.header), h("div", { id: `${this.trackerId}-search-box`, class: "search-box mf-listen" }, 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 getElement(this); }
+};
+PtcCollapseList.style = ptcCollapseListCss;
+
+export { PtcCollapseList as ptc_collapse_list };

package/dist/esm/ptc-container.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-0bf594c4.js';
+import { r as registerInstance, h, H as Host } from './index-c83db688.js';
 
 const ptcContainerCss = "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;position:relative}.white{border-radius:4px;background-color:var(--color-white)}.gray{border-radius:4px;background-color:var(--color-white-gray)}.content-wrapper{font-family:Raleway;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0;text-align:left}.content-wrapper.x-small{box-shadow:var(--ptc-shadow-x-small)}.content-wrapper.small{box-shadow:var(--ptc-shadow-small)}.content-wrapper.medium{box-shadow:var(--ptc-shadow-medium)}.content-wrapper.large{box-shadow:var(--ptc-shadow-large)}.content-wrapper.x-large{box-shadow:var(--ptc-shadow-x-large)}.content-wrapper.spacing-xx-small{padding:var(--ptc-element-spacing-01)}.content-wrapper.spacing-x-small{padding:var(--ptc-element-spacing-02)}.content-wrapper.spacing-small{padding:var(--ptc-element-spacing-03)}.content-wrapper.spacing-medium{padding:var(--ptc-element-spacing-04)}.content-wrapper.spacing-large{padding:var(--ptc-element-spacing-05)}.content-wrapper.spacing-x-large{padding:var(--ptc-element-spacing-06)}.content-wrapper.spacing-xx-large{padding:var(--ptc-element-spacing-07)}.content-wrapper.spacing-xxx-large{padding:var(--ptc-element-spacing-08)}";
 

package/dist/esm/ptc-countdown.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-0bf594c4.js';
+import { r as registerInstance, h } from './index-c83db688.js';
 import { c as createCommonjsModule, a as commonjsGlobal } from './_commonjsHelpers-9943807e.js';
 
 var dayjs_min = createCommonjsModule(function (module, exports) {

package/dist/esm/ptc-data-lookup.entry.js

@@ -1,6 +1,5 @@
-import { r as registerInstance, h, a as getElement } from './index-0bf594c4.js';
-import { M as MDCSelect } from './component-274da230.js';
-import './component-341e4eaa.js';
+import { r as registerInstance, h, g as getElement } from './index-c83db688.js';
+import { M as MDCSelect } from './component-9c921cc6.js';
 
 // Define the ElqLib class
 class ElqLib {

package/dist/esm/ptc-date.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-0bf594c4.js';
+import { r as registerInstance, h, H as Host } from './index-c83db688.js';
 
 const ptcDateCss = "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}:host(.small) span{font-size:var(--ptc-font-size-xx-small)}:host(.medium) span{font-size:var(--ptc-font-size-x-small)}:host(.primary-grey){color:var(--color-primary-gray-new)}:host(.white) span{color:var(--color-white)}:host(.date-m-top){margin-top:var(--ptc-element-spacing-01)}";
 

package/dist/esm/ptc-dropdown.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-0bf594c4.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-c83db688.js';
 
 const ptcDropdownCss = "@charset \"UTF-8\";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:inline-block;position:relative;color:var(--color-gray-12)}:host label{cursor:pointer}:host .dropdown__header{cursor:pointer;transition:background-color var(--ptc-ease-out) var(--ptc-transition-medium), border-color var(--ptc-ease-out) var(--ptc-transition-medium);background-color:var(--color-white);display:flex;align-items:center;align-content:center;border:1px solid var(--color-gray-05);padding:0.1875rem 0.75rem 0.1875rem 0.75rem;border-radius:4px;font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-regular);line-height:var(--ptc-line-height-loose);letter-spacing:0em;text-align:left;height:1.5rem}:host .dropdown__header b{font-weight:var(--ptc-font-weight-semibold)}:host .dropdown__header icon-asset{width:1rem;height:1rem;margin-left:0.5rem;margin-top:-0.5rem}:host .dropdown__header:hover{background-color:var(--color-gray-02)}:host .dropdown__header:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}:host .dropdown__list{display:table;border:1px solid rgba(0, 0, 0, 0.24);border-radius:var(--ptc-border-radius-large)}:host ul{display:block;top:0.2rem;margin:0;list-style-type:none;padding-inline-start:0;padding:0.25rem 0.25rem;background-color:var(--color-gray-02);cursor:pointer;position:absolute;z-index:500}@media only screen and (min-width: 992px){:host ul{right:0.2rem}}:host ul li{white-space:nowrap;padding:3px 1rem;font-weight:500}:host ul li.selected:before{content:\"✓\";display:block;position:absolute;left:0.4rem}:host ul li:hover{color:#fff;background-color:#699af8;border-radius:var(--ptc-border-radius-standard)}:host ul li:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}.ptc-dropdown{position:relative}.ptc-dropdown.support ul{margin:2px 4px 0 0}.ptc-dropdown.support .dropdown__header{transition:background-color var(--ptc-ease-out) var(--ptc-transition-medium), border-color var(--ptc-ease-out) var(--ptc-transition-medium);background-color:transparent;border:none;font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-semibold);line-height:var(--ptc-line-height-dense);letter-spacing:var(--ptc-letter-spacing-dense);text-align:left;padding:2px 6px}.ptc-dropdown.support .dropdown__header:hover{background-color:var(--color-gray-02)}.ptc-dropdown.support .dropdown__header icon-asset{width:10px;height:10px;margin-left:0.25rem;margin-top:-0.8rem}.ptc-dropdown.support .dropdown__header icon-asset svg{width:9px;height:9px}";
 

package/dist/esm/ptc-dynamic-card.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, g as getAssetPath, h, H as Host, a as getElement } from './index-0bf594c4.js';
+import { r as registerInstance, c as createEvent, a as getAssetPath, h, H as Host, g as getElement } from './index-c83db688.js';
 
 const ptcDynamicCardCss = "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}:host(.sequential) .card-wrapper{position:relative;cursor:pointer;outline:none}:host(.sequential) .card-wrapper:focus-visible{transition:none;border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline);z-index:1}:host(.sequential) .card{background-color:var(--color-gray-12);overflow:hidden}:host(.sequential) .card.hide{display:none}:host(.sequential) .card.show{display:block}:host(.sequential) .card-mobile,:host(.sequential) .card-dt-open{display:block}:host(.sequential) .card-mobile ptc-card-content,:host(.sequential) .card-dt-open ptc-card-content{display:flex;flex-basis:38%;justify-content:flex-start;align-items:center;padding:var(--ptc-element-spacing-06)}@media only screen and (min-width: 1200px){:host(.sequential) .card-mobile ptc-card-content,:host(.sequential) .card-dt-open ptc-card-content{height:unset;flex:0 0 310px}}:host(.sequential) .card-mobile ptc-picture,:host(.sequential) .card-dt-open ptc-picture{flex:1 1 auto}:host(.sequential) .card-mobile .card-title h3,:host(.sequential) .card-dt-open .card-title h3{color:var(--color-white);font-size:var(--ptc-font-size-medium);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-densest);margin-bottom:0rem;margin-block-start:0rem;letter-spacing:var(--ptc-letter-spacing-normal)}@media only screen and (min-width: 768px){:host(.sequential) .card-mobile .card-title h3,:host(.sequential) .card-dt-open .card-title h3{font-size:var(--ptc-font-size-large)}}:host(.sequential) .card-mobile .card-content,:host(.sequential) .card-dt-open .card-content{margin-top:var(--ptc-element-spacing-03)}:host(.sequential) .card-mobile{max-width:320px;min-width:226px;position:relative}@media only screen and (min-width: 480px){:host(.sequential) .card-mobile{max-width:350px}}:host(.sequential) .card-mobile::before{content:\"\";display:block;position:absolute;top:0;left:0;width:100%;height:5px;transition:background-color var(--ptc-transition-medium) var(--ptc-ease-out);background-color:transparent}:host(.sequential) .card-mobile ptc-card-content{align-items:flex-start}:host(.sequential) .card-dt-closed{width:135px;height:424px;position:relative}:host(.sequential) .card-dt-closed .closed-content{position:absolute;width:100%;height:100%;top:0;display:flex;align-items:center;justify-content:center}:host(.sequential) .card-dt-closed .card-title{text-align:center}:host(.sequential) .card-dt-closed .card-title h2{color:var(--color-white);font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-densest);margin-bottom:0rem;margin-block-start:0rem;letter-spacing:var(--ptc-letter-spacing-normal);padding-left:var(--ptc-element-spacing-02);padding-right:var(--ptc-element-spacing-02)}@media only screen and (min-width: 1440px){:host(.sequential) .card-dt-closed .card-title h2{font-size:var(--ptc-font-size-small)}}:host(.sequential) .card-dt-open{border-top:5px solid var(--color-green-05);display:flex;max-width:790px;transition:width var(--ptc-transition-x-fast) var(--ptc-ease-out)}@media only screen and (min-width: 1440px){:host(.sequential) .card-dt-open{max-width:825px}}:host(.sequential) .card-dt-open:not([hidden]){height:480px}:host(.sequential):host(.active) .card-mobile::before{background-color:var(--color-green-05)}";
 

package/dist/esm/ptc-ellipsis-dropdown.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-0bf594c4.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-c83db688.js';
 
 const ptcEllipsisDropdownCss = "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}}.ellipsis-icon{box-sizing:border-box;border:1px solid var(--color-gray-08);border-radius:2px;vertical-align:middle;height:18px;width:18px;text-align:center;display:flex;align-items:center;justify-content:center;transition:background-color var(--ptc-ease-out) var(--ptc-transition-medium), border-color var(--ptc-ease-out) var(--ptc-transition-medium)}.ellipsis-icon:hover{background-color:var(--color-gray-04);border-color:var(--color-gray-04)}.ellipsis-icon icon-asset{display:inline-block}.ellipsis-icon icon-asset svg{margin:0 auto;display:block;width:10px !important;height:10px !important}.ellipsis-icon.active{background-color:var(--color-green-07);border-color:var(--color-green-07)}.ellipsis-icon.active::after{content:\"\";width:32px;height:2px;display:inline-block;background-color:var(--color-green-07);position:absolute;bottom:-11px}@media only screen and (min-width: 1440px){.ellipsis-icon.active::after{bottom:-17px}}.ptc-ellipsis-dropdown{position:relative;display:inline-block;cursor:pointer;padding:2px 0 14px 0;border-bottom:2px solid var(--color-green-07);margin:0 1rem -1px 1rem;box-sizing:border-box}@media only screen and (min-width: 768px){.ptc-ellipsis-dropdown.default{padding:0px;border-bottom:none;margin:0;height:44px;width:44px;display:flex;justify-content:center;align-content:center;flex-wrap:wrap}}.ptc-ellipsis-dropdown.tab-with-banner{padding:0px 0 16px 0;margin:0 1rem -2.5px 1rem}@media only screen and (min-width: 992px){.ptc-ellipsis-dropdown.tab-with-banner{padding:0px 0px 1rem 0px;border-bottom:none;margin:0;height:100%;width:44px;display:flex;justify-content:center;align-content:center;flex-wrap:wrap}}.ptc-ellipsis-dropdown.tab-with-banner .ellipsis-icon.active::after{bottom:-2px}.ptc-ellipsis-dropdown.tab-with-banner .dropdown-container{display:none;margin-top:16px;box-shadow:0 6px 16px rgba(0, 0, 0, 0.24);border-radius:4px;position:absolute;z-index:1010;background:var(--color-white);padding:0.8rem 0;right:auto;left:0;min-width:max-content;width:100%}@media only screen and (min-width: 992px){.ptc-ellipsis-dropdown.tab-with-banner .dropdown-container{right:0;left:auto;top:50%;margin-top:22px}}.ptc-ellipsis-dropdown.tab-with-banner.show .dropdown-container{display:inline-block}@media only screen and (min-width: 1440px){.ptc-ellipsis-dropdown{height:34px;width:34px}}.ptc-ellipsis-dropdown .mob-drop{color:var(--color-gray-10);font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-p);font-family:\"Raleway\";font-style:normal;display:flex;align-items:center}.ptc-ellipsis-dropdown .mob-drop svg{display:inline-block;vertical-align:middle;margin:4px 0px 0px 12px;min-width:12px}.dropdown-container{display:none;margin-top:16px;box-shadow:0 6px 16px rgba(0, 0, 0, 0.24);border-radius:4px;position:absolute;z-index:1010;background:var(--color-white);padding:0.8rem 0;right:auto;left:0;min-width:max-content;width:100%}@media only screen and (min-width: 768px){.dropdown-container{right:0;left:auto;margin-top:48px}}@media only screen and (min-width: 1440px){.dropdown-container{margin-top:45px}}.dropdown-container .selected-drop .dropdown-item span{position:relative;font-weight:var(--ptc-font-weight-bold)}.dropdown-container .selected-drop .dropdown-item span::before{content:\"\";width:2px;height:60%;background:var(--color-green-07);display:block;left:16px;position:absolute;top:20%}.show .dropdown-container{display:inline-block}dropdown-item:focus-visible{outline:none}dropdown-item:focus-visible .dropdown-item{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}";
 

package/dist/esm/ptc-embedded-quiz.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement, F as Fragment } from './index-0bf594c4.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, F as Fragment } from './index-c83db688.js';
 
 const ptcEmbeddedQuizCss = "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}:host .quiz-slide-container{position:relative;width:100%;border:1px solid var(--color-gray-12);background-color:white;z-index:1}:host .quiz-slide-container .quiz-slide-text-container{max-width:calc(24 * var(--ptc-element-spacing-07))}:host .quiz-slide-background{position:absolute;top:0;left:0;width:100%;height:100%;background:url(\"https://www.ptc.com/-/media/Development/Embedded-Vuforia-Quiz/vuforia-background-guide-01.svg\");background-size:cover;background-position:center;opacity:0.2;z-index:-1}:host .quiz-slide-initial{padding:var(--ptc-element-spacing-08);display:flex;justify-content:center}:host .quiz-slide-initial #initial-quiz-p{padding:0 0 calc(var(--ptc-element-spacing-08) + var(--ptc-element-spacing-04)) 0}:host .quiz-slide-result .cta-container{display:flex;flex-direction:column;align-items:center}:host .quiz-slide-result .cta-container ptc-button{flex:1 0 100%;margin:0 0 var(--ptc-element-spacing-05) 0}:host .right-button-container{display:flex;justify-content:right}:host .right-button-container .restart-quiz-button{display:flex;margin:var(--ptc-element-spacing-06) var(--ptc-element-spacing-06) 0 0;transition:var(--ptc-transition-slow)}:host .right-button-container .restart-quiz-button #restart-arrow{display:flex;align-items:center}:host .right-button-container .restart-quiz-button #restart-arrow svg{z-index:2;margin-right:var(--ptc-element-spacing-03)}:host .right-button-container .restart-quiz-button:hover{cursor:pointer}:host .right-button-container .restart-quiz-button:hover #restart-arrow svg{transform:rotate(270deg)}:host .right-button-container .restart-quiz-button:hover ptc-para{opacity:0.7}:host .right-button-container .restart-quiz-button:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}:host .center-button-container{display:flex;justify-content:center}:host .previous-slide-button{display:flex;align-items:center;margin:0 0 var(--ptc-element-spacing-06) 0;transition:var(--ptc-transition-slow)}:host .previous-slide-button icon-asset{z-index:2;display:flex;align-items:center;margin-right:var(--ptc-element-spacing-03)}:host .previous-slide-button:hover{cursor:pointer}:host .previous-slide-button:hover icon-asset svg{transform:translateX(-8px)}:host .previous-slide-button:hover ptc-para{opacity:0.7}:host .previous-slide-button:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}:host .quiz-slide-dual-layout .image-container{padding-top:var(--ptc-element-spacing-06);display:flex;justify-content:center;height:calc(4 * var(--ptc-element-spacing-08));width:100%}:host .quiz-slide-dual-layout .image-container img{height:100%;width:100%}:host .quiz-slide-dual-layout .content-container{margin:var(--ptc-element-spacing-06) var(--ptc-element-spacing-08) var(--ptc-element-spacing-08) var(--ptc-element-spacing-08)}:host .quiz-slide-dual-layout .content-container .options-container{margin-top:var(--ptc-element-spacing-06);padding-left:var(--ptc-element-spacing-05);display:flex;flex-wrap:wrap;z-index:2}:host .quiz-slide-dual-layout .content-container .options-container .radio-input{flex:1 0 100%;margin-bottom:var(--ptc-element-spacing-06);display:flex;align-items:start;display:flex;align-items:flex-start}:host .quiz-slide-dual-layout .content-container .options-container .radio-input .radio{width:16px;height:16px;border-radius:var(--ptc-border-radius-circle);border:var(--color-gray-10) solid 1px;z-index:2;padding:3px;box-sizing:border-box;flex-shrink:0;margin-top:var(--ptc-element-spacing-01);background-color:white}:host .quiz-slide-dual-layout .content-container .options-container .radio-input .radio.clicked{border:var(--color-blue-08) solid 1px;background:var(--color-blue-08);background-clip:content-box, padding-box}:host .quiz-slide-dual-layout .content-container .options-container .radio-input .radio:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline);border-radius:50%}:host .quiz-slide-dual-layout .content-container .options-container .radio-input ptc-para{padding:0 var(--ptc-element-spacing-02) 0 var(--ptc-element-spacing-03)}:host .quiz-slide-dual-layout .content-container .options-container .radio-input:hover{cursor:pointer}:host .quiz-slide-dual-layout .content-container .options-container .radio-input:hover .radio{box-shadow:var(--ptc-shadow-x-small)}@media only screen and (min-width: 768px){:host .quiz-slide-container{min-height:calc(10 * var(--ptc-element-spacing-08));position:relative}:host .quiz-slide-initial #initial-quiz-p{padding:0 0 calc(var(--ptc-element-spacing-08) + var(--ptc-element-spacing-04)) 0}:host .quiz-slide-dual-layout{margin:0 var(--ptc-element-spacing-06) 0 var(--ptc-element-spacing-06)}:host .quiz-slide-dual-layout .image-container{height:calc(9 * var(--ptc-element-spacing-06));width:100%}:host .quiz-slide-dual-layout .image-container img{height:100%;width:auto}:host .quiz-slide-dual-layout .content-container{margin:var(--ptc-element-spacing-06) var(--ptc-element-spacing-06) var(--ptc-element-spacing-08) var(--ptc-element-spacing-06)}:host .quiz-slide-dual-layout .content-container .options-container .radio-input{flex:1 0 48%}}@media only screen and (min-width: 992px){:host .quiz-slide-initial #initial-quiz-p{padding:0 0 calc(var(--ptc-element-spacing-08) + var(--ptc-element-spacing-04)) 0}:host .quiz-slide-dual-layout .image-container{height:calc(8 * var(--ptc-element-spacing-07));width:auto}}@media only screen and (min-width: 1200px){:host .quiz-slide-initial #initial-quiz-p{padding:0 0 calc(var(--ptc-element-spacing-01) + var(--ptc-element-spacing-06)) 0}:host .quiz-slide-result .cta-container{flex-direction:row}:host .quiz-slide-result .cta-container ptc-button{flex:none;margin:0 var(--ptc-element-spacing-05) 0 0}:host .quiz-slide-dual-layout{display:flex;margin-bottom:var(--ptc-element-spacing-08)}:host .quiz-slide-dual-layout .image-container{flex-shrink:0;display:flex;align-items:center;height:calc(7 * var(--ptc-element-spacing-07));width:calc(15 * var(--ptc-element-spacing-07))}:host .quiz-slide-dual-layout .image-container img{height:100%;max-height:calc(7 * var(--ptc-element-spacing-07));max-width:calc(15 * var(--ptc-element-spacing-07))}:host .quiz-slide-dual-layout .content-container .options-container{padding-left:0}:host .quiz-slide-dual-layout .content-container .options-container .radio-input:nth-of-type(odd){margin-right:4%}}@media only screen and (min-width: 1440px){:host .quiz-slide-initial #initial-quiz-p{padding:0 0 var(--ptc-element-spacing-07) 0}}::slotted([slot=seo-content]){display:none}";