@ptcwebops/ptcw-design 0.5.6 → 0.5.8

package/dist/types/components.d.ts

@@ -60,6 +60,42 @@ export namespace Components {
          */
         "middle": string;
     }
+    interface PtcAccordion {
+        /**
+          * If multiple `<ptc-accordion-item>`s can open at the same time
+         */
+        "multiple"?: boolean;
+    }
+    interface PtcAccordionItem {
+        /**
+          * If the accordion item should be opened by default
+         */
+        "active"?: boolean;
+        /**
+          * If expanded height should be automatically calculated. If set, the `--ptc-accordion-item-body-max-height` CSS variable will be set automatically to the content height
+         */
+        "autoHeight"?: boolean;
+        /**
+          * Closes the accordion item
+         */
+        "close": () => Promise<void>;
+        /**
+          * Heading text. This will be overwritten by `heading` slot
+         */
+        "heading"?: string;
+        /**
+          * The HTML tag to be applied to the heading text. This will be overwritten by `heading` slot
+         */
+        "headingTag"?: string;
+        /**
+          * Opens the accordion item.
+         */
+        "open": () => Promise<void>;
+        /**
+          * Toggle open state of accordion item
+         */
+        "toggle": () => Promise<void>;
+    }
     interface PtcAnnouncement {
         /**
           * bar description
@@ -154,7 +190,7 @@ export namespace Components {
         /**
           * Card Type Specify Card Type, default to simple card
          */
-        "cardType": 'simple-card' | 'lottie-card' | 'custom-card' | 'clip-edge-card' | 'hightlight-card';
+        "cardType": 'simple-card' | 'lottie-card' | 'custom-card' | 'clip-edge-card' | 'hightlight-card' | 'listing-card';
         /**
           * If this card has Image
          */
@@ -179,6 +215,10 @@ export namespace Components {
           * (optional) Link card rel
          */
         "rel"?: string;
+        /**
+          * Ribbon will show on listing card if this field has any value
+         */
+        "ribbonText"?: string;
         /**
           * (optional) Injected CSS styles
          */
@@ -210,6 +250,8 @@ export namespace Components {
     }
     interface PtcCheckbox {
         "checked": 'checked' | 'unchecked';
+        "inputName": string;
+        "value": string;
     }
     interface PtcContainer {
         /**
@@ -218,6 +260,7 @@ export namespace Components {
         "backgroundColor": 'white' | 'gray';
         "containerType": 'normal' | 'large' | 'none';
         "elevation": 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
+        "spacing": 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xxx-large' | 'xxx-large';
     }
     interface PtcDate {
         /**
@@ -253,22 +296,22 @@ export namespace Components {
          */
         "year": number;
     }
+    interface PtcDropdown {
+        "label": string;
+        "listItems": any[];
+        /**
+          * Theme
+         */
+        "theme": 'sort';
+    }
     interface PtcEllipsisDropdown {
         "dataItems": Array<any>;
     }
     interface PtcFilterTag {
-        /**
-          * Font Size
-         */
-        "fontSize": 'small' | 'medium' | 'large';
         /**
           * Theme
          */
-        "theme": 'bubble';
-        /**
-          * Uppercase
-         */
-        "uppercase": boolean;
+        "theme": 'bubble' | 'link' | 'link-lg' | 'button';
     }
     interface PtcHero {
         /**
@@ -304,6 +347,10 @@ export namespace Components {
          */
         "valueWithUnit": string;
     }
+    interface PtcIconMinimize {
+        "heading": string;
+        "opened": boolean;
+    }
     interface PtcImg {
         /**
           * Image border shape
@@ -366,7 +413,7 @@ export namespace Components {
         /**
           * Theme
          */
-        "theme": 'simple' | 'underline' | 'arrow' | 'nav-title'| 'primary-nav-link' | 'nav-title-link' | 'secondary-nav-link' | 'footer-nav-link' | 'copyright-link' | 'arrow-plm';
+        "theme": 'simple' | 'underline' | 'arrow' | 'nav-title'| 'primary-nav-link' | 'nav-title-link' | 'secondary-nav-link' | 'footer-nav-link' | 'copyright-link' | 'arrow-plm' | 'product-link';
         /**
           * Uppercase
          */
@@ -440,10 +487,18 @@ export namespace Components {
           * Sets if popup should overlay
          */
         "overlay"?: boolean;
+        /**
+          * Sets if popup should have rounded corners
+         */
+        "rounded"?: boolean;
         /**
           * Set whether or not to display modal
          */
         "show"?: boolean;
+        /**
+          * Sets if popup should have header footer sections
+         */
+        "showHeaderFooter"?: boolean;
         /**
           * Sets if popup should close if click on outside
          */
@@ -499,6 +554,16 @@ export namespace Components {
          */
         "styles"?: string;
     }
+    interface PtcPagenation {
+        "appendArray": boolean;
+        "clickedPageNumber": number;
+        "lastValue": string;
+        "maxPageNumber": number;
+        "minPageNumber": number;
+        "numberOfItems": number;
+        "previousValue": string;
+        "totalCount"?: number;
+    }
     interface PtcPara {
         /**
           * Paragraph font size
@@ -701,18 +766,18 @@ export namespace Components {
         /**
           * Title Margin
          */
-        "titleMargin"?: | 'margin-flush'
-    | 'margin-top-3'
-    | 'margin-top-4'
-    | 'margin-top-5'
-    | 'margin-top-6'
-    | 'margin-bottom-3'
-    | 'margin-bottom-4'
-    | 'margin-bottom-5'
-    | 'margin-bottom-6'
-    | 'margin-3'
-    | 'margin-4'
-    | 'margin-5'
+        "titleMargin"?: | 'margin-flush'
+    | 'margin-top-3'
+    | 'margin-top-4'
+    | 'margin-top-5'
+    | 'margin-top-6'
+    | 'margin-bottom-3'
+    | 'margin-bottom-4'
+    | 'margin-bottom-5'
+    | 'margin-bottom-6'
+    | 'margin-3'
+    | 'margin-4'
+    | 'margin-5'
     | 'margin-6';
         /**
           * Title Shadow
@@ -729,7 +794,7 @@ export namespace Components {
         /**
           * Title Tag Type
          */
-        "type": 'h1' | 'h2' | 'h3';
+        "type": 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
         /**
           * Upperline Style
          */
@@ -775,6 +840,18 @@ declare global {
         prototype: HTMLMyComponentElement;
         new (): HTMLMyComponentElement;
     };
+    interface HTMLPtcAccordionElement extends Components.PtcAccordion, HTMLStencilElement {
+    }
+    var HTMLPtcAccordionElement: {
+        prototype: HTMLPtcAccordionElement;
+        new (): HTMLPtcAccordionElement;
+    };
+    interface HTMLPtcAccordionItemElement extends Components.PtcAccordionItem, HTMLStencilElement {
+    }
+    var HTMLPtcAccordionItemElement: {
+        prototype: HTMLPtcAccordionItemElement;
+        new (): HTMLPtcAccordionItemElement;
+    };
     interface HTMLPtcAnnouncementElement extends Components.PtcAnnouncement, HTMLStencilElement {
     }
     var HTMLPtcAnnouncementElement: {
@@ -835,6 +912,12 @@ declare global {
         prototype: HTMLPtcDateElement;
         new (): HTMLPtcDateElement;
     };
+    interface HTMLPtcDropdownElement extends Components.PtcDropdown, HTMLStencilElement {
+    }
+    var HTMLPtcDropdownElement: {
+        prototype: HTMLPtcDropdownElement;
+        new (): HTMLPtcDropdownElement;
+    };
     interface HTMLPtcEllipsisDropdownElement extends Components.PtcEllipsisDropdown, HTMLStencilElement {
     }
     var HTMLPtcEllipsisDropdownElement: {
@@ -865,6 +948,12 @@ declare global {
         prototype: HTMLPtcIconListElement;
         new (): HTMLPtcIconListElement;
     };
+    interface HTMLPtcIconMinimizeElement extends Components.PtcIconMinimize, HTMLStencilElement {
+    }
+    var HTMLPtcIconMinimizeElement: {
+        prototype: HTMLPtcIconMinimizeElement;
+        new (): HTMLPtcIconMinimizeElement;
+    };
     interface HTMLPtcImgElement extends Components.PtcImg, HTMLStencilElement {
     }
     var HTMLPtcImgElement: {
@@ -931,6 +1020,12 @@ declare global {
         prototype: HTMLPtcOverlayElement;
         new (): HTMLPtcOverlayElement;
     };
+    interface HTMLPtcPagenationElement extends Components.PtcPagenation, HTMLStencilElement {
+    }
+    var HTMLPtcPagenationElement: {
+        prototype: HTMLPtcPagenationElement;
+        new (): HTMLPtcPagenationElement;
+    };
     interface HTMLPtcParaElement extends Components.PtcPara, HTMLStencilElement {
     }
     var HTMLPtcParaElement: {
@@ -1032,6 +1127,8 @@ declare global {
         "icon-asset": HTMLIconAssetElement;
         "list-item": HTMLListItemElement;
         "my-component": HTMLMyComponentElement;
+        "ptc-accordion": HTMLPtcAccordionElement;
+        "ptc-accordion-item": HTMLPtcAccordionItemElement;
         "ptc-announcement": HTMLPtcAnnouncementElement;
         "ptc-breadcrumb": HTMLPtcBreadcrumbElement;
         "ptc-button": HTMLPtcButtonElement;
@@ -1042,11 +1139,13 @@ declare global {
         "ptc-checkbox": HTMLPtcCheckboxElement;
         "ptc-container": HTMLPtcContainerElement;
         "ptc-date": HTMLPtcDateElement;
+        "ptc-dropdown": HTMLPtcDropdownElement;
         "ptc-ellipsis-dropdown": HTMLPtcEllipsisDropdownElement;
         "ptc-filter-tag": HTMLPtcFilterTagElement;
         "ptc-hero": HTMLPtcHeroElement;
         "ptc-hero-footer-cta": HTMLPtcHeroFooterCtaElement;
         "ptc-icon-list": HTMLPtcIconListElement;
+        "ptc-icon-minimize": HTMLPtcIconMinimizeElement;
         "ptc-img": HTMLPtcImgElement;
         "ptc-link": HTMLPtcLinkElement;
         "ptc-list": HTMLPtcListElement;
@@ -1058,6 +1157,7 @@ declare global {
         "ptc-nav": HTMLPtcNavElement;
         "ptc-nav-item": HTMLPtcNavItemElement;
         "ptc-overlay": HTMLPtcOverlayElement;
+        "ptc-pagenation": HTMLPtcPagenationElement;
         "ptc-para": HTMLPtcParaElement;
         "ptc-picture": HTMLPtcPictureElement;
         "ptc-previous-url": HTMLPtcPreviousUrlElement;
@@ -1131,6 +1231,46 @@ declare namespace LocalJSX {
          */
         "middle"?: string;
     }
+    interface PtcAccordion {
+        /**
+          * If multiple `<ptc-accordion-item>`s can open at the same time
+         */
+        "multiple"?: boolean;
+    }
+    interface PtcAccordionItem {
+        /**
+          * If the accordion item should be opened by default
+         */
+        "active"?: boolean;
+        /**
+          * If expanded height should be automatically calculated. If set, the `--ptc-accordion-item-body-max-height` CSS variable will be set automatically to the content height
+         */
+        "autoHeight"?: boolean;
+        /**
+          * Heading text. This will be overwritten by `heading` slot
+         */
+        "heading"?: string;
+        /**
+          * The HTML tag to be applied to the heading text. This will be overwritten by `heading` slot
+         */
+        "headingTag"?: string;
+        /**
+          * Emitted when accordion item has closed
+         */
+        "onClosed"?: (event: CustomEvent<any>) => void;
+        /**
+          * Emitted when accordion item started closing
+         */
+        "onClosing"?: (event: CustomEvent<any>) => void;
+        /**
+          * Emitted when accordion item has opened
+         */
+        "onOpened"?: (event: CustomEvent<any>) => void;
+        /**
+          * Emitted when accordion item started opening
+         */
+        "onOpening"?: (event: CustomEvent<any>) => void;
+    }
     interface PtcAnnouncement {
         /**
           * bar description
@@ -1233,7 +1373,7 @@ declare namespace LocalJSX {
         /**
           * Card Type Specify Card Type, default to simple card
          */
-        "cardType"?: 'simple-card' | 'lottie-card' | 'custom-card' | 'clip-edge-card' | 'hightlight-card';
+        "cardType"?: 'simple-card' | 'lottie-card' | 'custom-card' | 'clip-edge-card' | 'hightlight-card' | 'listing-card';
         /**
           * If this card has Image
          */
@@ -1258,6 +1398,10 @@ declare namespace LocalJSX {
           * (optional) Link card rel
          */
         "rel"?: string;
+        /**
+          * Ribbon will show on listing card if this field has any value
+         */
+        "ribbonText"?: string;
         /**
           * (optional) Injected CSS styles
          */
@@ -1293,7 +1437,9 @@ declare namespace LocalJSX {
     }
     interface PtcCheckbox {
         "checked"?: 'checked' | 'unchecked';
-        "onClickedItem"?: (event: CustomEvent<any>) => void;
+        "inputName"?: string;
+        "onCheckedChanged"?: (event: CustomEvent<any>) => void;
+        "value"?: string;
     }
     interface PtcContainer {
         /**
@@ -1302,6 +1448,7 @@ declare namespace LocalJSX {
         "backgroundColor"?: 'white' | 'gray';
         "containerType"?: 'normal' | 'large' | 'none';
         "elevation"?: 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
+        "spacing"?: 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xxx-large' | 'xxx-large';
     }
     interface PtcDate {
         /**
@@ -1337,23 +1484,25 @@ declare namespace LocalJSX {
          */
         "year"?: number;
     }
+    interface PtcDropdown {
+        "label"?: string;
+        "listItems"?: any[];
+        "onClickedItem"?: (event: CustomEvent<any>) => void;
+        /**
+          * Theme
+         */
+        "theme"?: 'sort';
+    }
     interface PtcEllipsisDropdown {
         "dataItems"?: Array<any>;
         "onItemSelected"?: (event: CustomEvent<any>) => void;
     }
     interface PtcFilterTag {
-        /**
-          * Font Size
-         */
-        "fontSize"?: 'small' | 'medium' | 'large';
+        "onClicked"?: (event: CustomEvent<any>) => void;
         /**
           * Theme
          */
-        "theme"?: 'bubble';
-        /**
-          * Uppercase
-         */
-        "uppercase"?: boolean;
+        "theme"?: 'bubble' | 'link' | 'link-lg' | 'button';
     }
     interface PtcHero {
         /**
@@ -1389,6 +1538,10 @@ declare namespace LocalJSX {
          */
         "valueWithUnit"?: string;
     }
+    interface PtcIconMinimize {
+        "heading"?: string;
+        "opened"?: boolean;
+    }
     interface PtcImg {
         /**
           * Image border shape
@@ -1451,7 +1604,7 @@ declare namespace LocalJSX {
         /**
           * Theme
          */
-        "theme"?: 'simple' | 'underline' | 'arrow' | 'nav-title'| 'primary-nav-link' | 'nav-title-link' | 'secondary-nav-link' | 'footer-nav-link' | 'copyright-link' | 'arrow-plm';
+        "theme"?: 'simple' | 'underline' | 'arrow' | 'nav-title'| 'primary-nav-link' | 'nav-title-link' | 'secondary-nav-link' | 'footer-nav-link' | 'copyright-link' | 'arrow-plm' | 'product-link';
         /**
           * Uppercase
          */
@@ -1533,10 +1686,18 @@ declare namespace LocalJSX {
           * Sets if popup should overlay
          */
         "overlay"?: boolean;
+        /**
+          * Sets if popup should have rounded corners
+         */
+        "rounded"?: boolean;
         /**
           * Set whether or not to display modal
          */
         "show"?: boolean;
+        /**
+          * Sets if popup should have header footer sections
+         */
+        "showHeaderFooter"?: boolean;
         /**
           * Sets if popup should close if click on outside
          */
@@ -1596,6 +1757,17 @@ declare namespace LocalJSX {
          */
         "styles"?: string;
     }
+    interface PtcPagenation {
+        "appendArray"?: boolean;
+        "clickedPageNumber"?: number;
+        "lastValue"?: string;
+        "maxPageNumber"?: number;
+        "minPageNumber"?: number;
+        "numberOfItems"?: number;
+        "onPageClicked"?: (event: CustomEvent<number>) => void;
+        "previousValue"?: string;
+        "totalCount"?: number;
+    }
     interface PtcPara {
         /**
           * Paragraph font size
@@ -1798,18 +1970,18 @@ declare namespace LocalJSX {
         /**
           * Title Margin
          */
-        "titleMargin"?: | 'margin-flush'
-    | 'margin-top-3'
-    | 'margin-top-4'
-    | 'margin-top-5'
-    | 'margin-top-6'
-    | 'margin-bottom-3'
-    | 'margin-bottom-4'
-    | 'margin-bottom-5'
-    | 'margin-bottom-6'
-    | 'margin-3'
-    | 'margin-4'
-    | 'margin-5'
+        "titleMargin"?: | 'margin-flush'
+    | 'margin-top-3'
+    | 'margin-top-4'
+    | 'margin-top-5'
+    | 'margin-top-6'
+    | 'margin-bottom-3'
+    | 'margin-bottom-4'
+    | 'margin-bottom-5'
+    | 'margin-bottom-6'
+    | 'margin-3'
+    | 'margin-4'
+    | 'margin-5'
     | 'margin-6';
         /**
           * Title Shadow
@@ -1826,7 +1998,7 @@ declare namespace LocalJSX {
         /**
           * Title Tag Type
          */
-        "type"?: 'h1' | 'h2' | 'h3';
+        "type"?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
         /**
           * Upperline Style
          */
@@ -1850,6 +2022,8 @@ declare namespace LocalJSX {
         "icon-asset": IconAsset;
         "list-item": ListItem;
         "my-component": MyComponent;
+        "ptc-accordion": PtcAccordion;
+        "ptc-accordion-item": PtcAccordionItem;
         "ptc-announcement": PtcAnnouncement;
         "ptc-breadcrumb": PtcBreadcrumb;
         "ptc-button": PtcButton;
@@ -1860,11 +2034,13 @@ declare namespace LocalJSX {
         "ptc-checkbox": PtcCheckbox;
         "ptc-container": PtcContainer;
         "ptc-date": PtcDate;
+        "ptc-dropdown": PtcDropdown;
         "ptc-ellipsis-dropdown": PtcEllipsisDropdown;
         "ptc-filter-tag": PtcFilterTag;
         "ptc-hero": PtcHero;
         "ptc-hero-footer-cta": PtcHeroFooterCta;
         "ptc-icon-list": PtcIconList;
+        "ptc-icon-minimize": PtcIconMinimize;
         "ptc-img": PtcImg;
         "ptc-link": PtcLink;
         "ptc-list": PtcList;
@@ -1876,6 +2052,7 @@ declare namespace LocalJSX {
         "ptc-nav": PtcNav;
         "ptc-nav-item": PtcNavItem;
         "ptc-overlay": PtcOverlay;
+        "ptc-pagenation": PtcPagenation;
         "ptc-para": PtcPara;
         "ptc-picture": PtcPicture;
         "ptc-previous-url": PtcPreviousUrl;
@@ -1902,6 +2079,8 @@ declare module "@stencil/core" {
             "icon-asset": LocalJSX.IconAsset & JSXBase.HTMLAttributes<HTMLIconAssetElement>;
             "list-item": LocalJSX.ListItem & JSXBase.HTMLAttributes<HTMLListItemElement>;
             "my-component": LocalJSX.MyComponent & JSXBase.HTMLAttributes<HTMLMyComponentElement>;
+            "ptc-accordion": LocalJSX.PtcAccordion & JSXBase.HTMLAttributes<HTMLPtcAccordionElement>;
+            "ptc-accordion-item": LocalJSX.PtcAccordionItem & JSXBase.HTMLAttributes<HTMLPtcAccordionItemElement>;
             "ptc-announcement": LocalJSX.PtcAnnouncement & JSXBase.HTMLAttributes<HTMLPtcAnnouncementElement>;
             "ptc-breadcrumb": LocalJSX.PtcBreadcrumb & JSXBase.HTMLAttributes<HTMLPtcBreadcrumbElement>;
             "ptc-button": LocalJSX.PtcButton & JSXBase.HTMLAttributes<HTMLPtcButtonElement>;
@@ -1912,11 +2091,13 @@ declare module "@stencil/core" {
             "ptc-checkbox": LocalJSX.PtcCheckbox & JSXBase.HTMLAttributes<HTMLPtcCheckboxElement>;
             "ptc-container": LocalJSX.PtcContainer & JSXBase.HTMLAttributes<HTMLPtcContainerElement>;
             "ptc-date": LocalJSX.PtcDate & JSXBase.HTMLAttributes<HTMLPtcDateElement>;
+            "ptc-dropdown": LocalJSX.PtcDropdown & JSXBase.HTMLAttributes<HTMLPtcDropdownElement>;
             "ptc-ellipsis-dropdown": LocalJSX.PtcEllipsisDropdown & JSXBase.HTMLAttributes<HTMLPtcEllipsisDropdownElement>;
             "ptc-filter-tag": LocalJSX.PtcFilterTag & JSXBase.HTMLAttributes<HTMLPtcFilterTagElement>;
             "ptc-hero": LocalJSX.PtcHero & JSXBase.HTMLAttributes<HTMLPtcHeroElement>;
             "ptc-hero-footer-cta": LocalJSX.PtcHeroFooterCta & JSXBase.HTMLAttributes<HTMLPtcHeroFooterCtaElement>;
             "ptc-icon-list": LocalJSX.PtcIconList & JSXBase.HTMLAttributes<HTMLPtcIconListElement>;
+            "ptc-icon-minimize": LocalJSX.PtcIconMinimize & JSXBase.HTMLAttributes<HTMLPtcIconMinimizeElement>;
             "ptc-img": LocalJSX.PtcImg & JSXBase.HTMLAttributes<HTMLPtcImgElement>;
             "ptc-link": LocalJSX.PtcLink & JSXBase.HTMLAttributes<HTMLPtcLinkElement>;
             "ptc-list": LocalJSX.PtcList & JSXBase.HTMLAttributes<HTMLPtcListElement>;
@@ -1928,6 +2109,7 @@ declare module "@stencil/core" {
             "ptc-nav": LocalJSX.PtcNav & JSXBase.HTMLAttributes<HTMLPtcNavElement>;
             "ptc-nav-item": LocalJSX.PtcNavItem & JSXBase.HTMLAttributes<HTMLPtcNavItemElement>;
             "ptc-overlay": LocalJSX.PtcOverlay & JSXBase.HTMLAttributes<HTMLPtcOverlayElement>;
+            "ptc-pagenation": LocalJSX.PtcPagenation & JSXBase.HTMLAttributes<HTMLPtcPagenationElement>;
             "ptc-para": LocalJSX.PtcPara & JSXBase.HTMLAttributes<HTMLPtcParaElement>;
             "ptc-picture": LocalJSX.PtcPicture & JSXBase.HTMLAttributes<HTMLPtcPictureElement>;
             "ptc-previous-url": LocalJSX.PtcPreviousUrl & JSXBase.HTMLAttributes<HTMLPtcPreviousUrlElement>;