@ptcwebops/ptcw-design 0.0.4 → 0.0.5

package/dist/types/components.d.ts

@@ -10,13 +10,13 @@ export namespace Components {
         /**
           * Icon Color
          */
-        "color": 'black' | 'white'| 'ptc-green';
+        "color": 'black' | 'white' | 'ptc-green';
         /**
           * Icon ID name
          */
         "name": string;
         /**
-          * Icon Pulse Animation
+          * Icon Pulse Animation (not valid for ptc type)
          */
         "pulse": 'fa-pulse' | '';
         /**
@@ -24,13 +24,17 @@ export namespace Components {
          */
         "size": 'small' | 'large';
         /**
-          * Icon Spin Animation
+          * Icon Spin Animation (not valid for ptc type)
          */
         "spin": 'fa-spin' | '';
         /**
           * Icon Type
          */
-        "type": 'solid' | 'regular' | 'brands';
+        "type": 'solid' | 'brands' | 'ptc' | 'regular';
+    }
+    interface ListItem {
+        "linkHref"?: string;
+        "listType": 'link-primary' | 'link-sub' | 'icon' | 'para-list';
     }
     interface MyComponent {
         /**
@@ -50,23 +54,19 @@ export namespace Components {
         /**
           * Button theme color
          */
-        "color": 'offwhite' | 'blackgrey' | 'turtlegreen'| 'neon';
+        "color": 'offwhite' | 'blackgrey' | 'turtlegreen' | 'neon';
         /**
           * Disabled button
          */
-        "disabled": boolean;
+        "disabled"?: boolean | undefined;
         /**
           * Icon Animation
          */
-        "icon": 'icon-right' | 'icon-down' | 'icon' | '';
-        /**
-          * Button shape
-         */
-        "shape": 'square' | 'round';
+        "iconAnimation": 'animation-right' | 'animation-down' | '';
         /**
-          * Button Size
+          * Icon Position
          */
-        "size": 'small' | 'large';
+        "iconPosition": 'icon-left' | 'icon-right';
         /**
           * Button type
          */
@@ -74,9 +74,65 @@ export namespace Components {
     }
     interface PtcCard {
         /**
-          * The first name
+          * Card Link URL (Optional)
          */
-        "first": string;
+        "cardHref"?: string;
+        /**
+          * Card Type Specify Card Type, default to simple card
+         */
+        "cardType": 'simple-card' | 'lotti-image-card-1' | 'normal-image-card-1' | 'highlight-card';
+        /**
+          * If this card has Image
+         */
+        "hasImage": boolean;
+        /**
+          * If this card has Lottie Image
+         */
+        "hasLottie": boolean;
+        /**
+          * If this card has Video
+         */
+        "hasVideo": boolean;
+        /**
+          * Card heading
+         */
+        "heading": string;
+        /**
+          * Card Heading Arrow (Optional)
+         */
+        "headingArrow"?: boolean;
+        /**
+          * Heading Position These values are available: 'is-placed-left', 'is-placed-left', 'is-placed-right', 'is-placed-normal', 'is-placed-start' Default: "is-placed-left"
+         */
+        "headingPosition"?: string;
+        /**
+          * (optional) Link card rel
+         */
+        "rel"?: string;
+        /**
+          * (optional) Link card target
+         */
+        "target"?: string;
+    }
+    interface PtcDate {
+        /**
+          * Country examples: en-US, zh-CN, zh-TW, fr-FR, ja-JP, ru-RU, de-DE, ko-KR, it-IT, es-ES
+         */
+        "country": string | undefined;
+        /**
+          * Day An integer between 1 and 31 representing the day of the month. If omitted, defaults to 1.
+         */
+        "day": number;
+        /**
+          * Month An integer between 0 (January) and 11 (December) representing the month.If omitted, defaults to 0.
+         */
+        "month": number;
+        /**
+          * Year
+         */
+        "year": number;
+    }
+    interface PtcFooter {
     }
     interface PtcImage {
         /**
@@ -88,11 +144,19 @@ export namespace Components {
          */
         "src": string;
     }
+    interface PtcImg {
+        "imageType": 'smart-bg' | 'smart-img';
+        "imgUrl": string;
+        "sizeLg": string;
+        "sizeMd": string;
+        "sizeSm": string;
+        "sizeXs": string;
+    }
     interface PtcLink {
         /**
           * Rxternal link
          */
-        "external"?: boolean | undefined;
+        "external": boolean;
         /**
           * Font Size
          */
@@ -109,16 +173,96 @@ export namespace Components {
           * Target
          */
         "target": string | undefined;
-        /**
-          * Uppercase
-         */
-        "textTransform": 'uppercase' | '';
         /**
           * Theme
          */
         "theme": 'simple' | 'arrow';
+        /**
+          * Uppercase
+         */
+        "uppercase": boolean;
     }
     interface PtcList {
+        "linkHref"?: string;
+        "listType": 'link-primary' | 'link-sub' | 'icon' | 'para-list';
+    }
+    interface PtcLottie {
+        /**
+          * Set Json file src
+         */
+        "jsonSrc": string;
+        /**
+          * Animation speed
+         */
+        "speed": number;
+    }
+    interface PtcNav {
+    }
+    interface PtcNavItem {
+        /**
+          * If the current nav item is expanded
+         */
+        "ariaExpanded": boolean;
+        /**
+          * Depth of the current nav item
+         */
+        "depth": number;
+        /**
+          * If the current nav item has children nav items
+         */
+        "hasChildren": boolean;
+        /**
+          * Nav Description
+         */
+        "label": string;
+        /**
+          * Nav Item Type
+         */
+        "navType": 'primary-nav' | 'secondary-nav' | 'primary-footer' | 'secondary-footer' | 'language-nav';
+        /**
+          * If the parent nav item of the current one is expanded
+         */
+        "parentExpanded": boolean;
+        /**
+          * Link URL
+         */
+        "url": string;
+    }
+    interface PtcOverlay {
+    }
+    interface PtcPara {
+        /**
+          * Paragraph font size
+         */
+        "fontSize": 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'xxx-large' | 'xxxx-large';
+        /**
+          * Paragraph font weight
+         */
+        "fontWeight": 'w-3' | 'w-4' | 'w-5' | 'w-6' | 'w-7' | 'w-8' | 'w-9';
+        /**
+          * Paragraph Style
+         */
+        "paraStyle": 'default' | 'intro' | 'small';
+    }
+    interface PtcPicture {
+        "lazy": 'lazy' | 'eager';
+    }
+    interface PtcSpacer {
+        /**
+          * Breakpoint
+         */
+        "breakpoint": '' | 'medium' | 'small' | 'large' | 'x-large' | 'xx-large' | 'x-small' | 'xx-small';
+        /**
+          * Direction
+         */
+        "direction": 'vertical' | 'horizontal';
+        /**
+          * Spacing Size
+         */
+        "size": 'large' | 'medium' | 'small' | 'x-large' | 'x-small' | 'xx-large' | 'xx-small' | 'xxx-large' | 'xxxx-large';
+    }
+    interface PtcSpan {
+        "spanStyle": 'link-style' | 'tag-style' | 'nav-style';
     }
     interface PtcTitle {
         /**
@@ -142,6 +286,12 @@ declare global {
         prototype: HTMLIconAssetElement;
         new (): HTMLIconAssetElement;
     };
+    interface HTMLListItemElement extends Components.ListItem, HTMLStencilElement {
+    }
+    var HTMLListItemElement: {
+        prototype: HTMLListItemElement;
+        new (): HTMLListItemElement;
+    };
     interface HTMLMyComponentElement extends Components.MyComponent, HTMLStencilElement {
     }
     var HTMLMyComponentElement: {
@@ -160,12 +310,30 @@ declare global {
         prototype: HTMLPtcCardElement;
         new (): HTMLPtcCardElement;
     };
+    interface HTMLPtcDateElement extends Components.PtcDate, HTMLStencilElement {
+    }
+    var HTMLPtcDateElement: {
+        prototype: HTMLPtcDateElement;
+        new (): HTMLPtcDateElement;
+    };
+    interface HTMLPtcFooterElement extends Components.PtcFooter, HTMLStencilElement {
+    }
+    var HTMLPtcFooterElement: {
+        prototype: HTMLPtcFooterElement;
+        new (): HTMLPtcFooterElement;
+    };
     interface HTMLPtcImageElement extends Components.PtcImage, HTMLStencilElement {
     }
     var HTMLPtcImageElement: {
         prototype: HTMLPtcImageElement;
         new (): HTMLPtcImageElement;
     };
+    interface HTMLPtcImgElement extends Components.PtcImg, HTMLStencilElement {
+    }
+    var HTMLPtcImgElement: {
+        prototype: HTMLPtcImgElement;
+        new (): HTMLPtcImgElement;
+    };
     interface HTMLPtcLinkElement extends Components.PtcLink, HTMLStencilElement {
     }
     var HTMLPtcLinkElement: {
@@ -178,6 +346,54 @@ declare global {
         prototype: HTMLPtcListElement;
         new (): HTMLPtcListElement;
     };
+    interface HTMLPtcLottieElement extends Components.PtcLottie, HTMLStencilElement {
+    }
+    var HTMLPtcLottieElement: {
+        prototype: HTMLPtcLottieElement;
+        new (): HTMLPtcLottieElement;
+    };
+    interface HTMLPtcNavElement extends Components.PtcNav, HTMLStencilElement {
+    }
+    var HTMLPtcNavElement: {
+        prototype: HTMLPtcNavElement;
+        new (): HTMLPtcNavElement;
+    };
+    interface HTMLPtcNavItemElement extends Components.PtcNavItem, HTMLStencilElement {
+    }
+    var HTMLPtcNavItemElement: {
+        prototype: HTMLPtcNavItemElement;
+        new (): HTMLPtcNavItemElement;
+    };
+    interface HTMLPtcOverlayElement extends Components.PtcOverlay, HTMLStencilElement {
+    }
+    var HTMLPtcOverlayElement: {
+        prototype: HTMLPtcOverlayElement;
+        new (): HTMLPtcOverlayElement;
+    };
+    interface HTMLPtcParaElement extends Components.PtcPara, HTMLStencilElement {
+    }
+    var HTMLPtcParaElement: {
+        prototype: HTMLPtcParaElement;
+        new (): HTMLPtcParaElement;
+    };
+    interface HTMLPtcPictureElement extends Components.PtcPicture, HTMLStencilElement {
+    }
+    var HTMLPtcPictureElement: {
+        prototype: HTMLPtcPictureElement;
+        new (): HTMLPtcPictureElement;
+    };
+    interface HTMLPtcSpacerElement extends Components.PtcSpacer, HTMLStencilElement {
+    }
+    var HTMLPtcSpacerElement: {
+        prototype: HTMLPtcSpacerElement;
+        new (): HTMLPtcSpacerElement;
+    };
+    interface HTMLPtcSpanElement extends Components.PtcSpan, HTMLStencilElement {
+    }
+    var HTMLPtcSpanElement: {
+        prototype: HTMLPtcSpanElement;
+        new (): HTMLPtcSpanElement;
+    };
     interface HTMLPtcTitleElement extends Components.PtcTitle, HTMLStencilElement {
     }
     var HTMLPtcTitleElement: {
@@ -186,12 +402,24 @@ declare global {
     };
     interface HTMLElementTagNameMap {
         "icon-asset": HTMLIconAssetElement;
+        "list-item": HTMLListItemElement;
         "my-component": HTMLMyComponentElement;
         "ptc-button": HTMLPtcButtonElement;
         "ptc-card": HTMLPtcCardElement;
+        "ptc-date": HTMLPtcDateElement;
+        "ptc-footer": HTMLPtcFooterElement;
         "ptc-image": HTMLPtcImageElement;
+        "ptc-img": HTMLPtcImgElement;
         "ptc-link": HTMLPtcLinkElement;
         "ptc-list": HTMLPtcListElement;
+        "ptc-lottie": HTMLPtcLottieElement;
+        "ptc-nav": HTMLPtcNavElement;
+        "ptc-nav-item": HTMLPtcNavItemElement;
+        "ptc-overlay": HTMLPtcOverlayElement;
+        "ptc-para": HTMLPtcParaElement;
+        "ptc-picture": HTMLPtcPictureElement;
+        "ptc-spacer": HTMLPtcSpacerElement;
+        "ptc-span": HTMLPtcSpanElement;
         "ptc-title": HTMLPtcTitleElement;
     }
 }
@@ -200,13 +428,13 @@ declare namespace LocalJSX {
         /**
           * Icon Color
          */
-        "color"?: 'black' | 'white'| 'ptc-green';
+        "color"?: 'black' | 'white' | 'ptc-green';
         /**
           * Icon ID name
          */
         "name"?: string;
         /**
-          * Icon Pulse Animation
+          * Icon Pulse Animation (not valid for ptc type)
          */
         "pulse"?: 'fa-pulse' | '';
         /**
@@ -214,13 +442,17 @@ declare namespace LocalJSX {
          */
         "size"?: 'small' | 'large';
         /**
-          * Icon Spin Animation
+          * Icon Spin Animation (not valid for ptc type)
          */
         "spin"?: 'fa-spin' | '';
         /**
           * Icon Type
          */
-        "type"?: 'solid' | 'regular' | 'brands';
+        "type"?: 'solid' | 'brands' | 'ptc' | 'regular';
+    }
+    interface ListItem {
+        "linkHref"?: string;
+        "listType"?: 'link-primary' | 'link-sub' | 'icon' | 'para-list';
     }
     interface MyComponent {
         /**
@@ -240,23 +472,23 @@ declare namespace LocalJSX {
         /**
           * Button theme color
          */
-        "color"?: 'offwhite' | 'blackgrey' | 'turtlegreen'| 'neon';
+        "color"?: 'offwhite' | 'blackgrey' | 'turtlegreen' | 'neon';
         /**
           * Disabled button
          */
-        "disabled"?: boolean;
+        "disabled"?: boolean | undefined;
         /**
           * Icon Animation
          */
-        "icon"?: 'icon-right' | 'icon-down' | 'icon' | '';
+        "iconAnimation"?: 'animation-right' | 'animation-down' | '';
         /**
-          * Button shape
+          * Icon Position
          */
-        "shape"?: 'square' | 'round';
+        "iconPosition"?: 'icon-left' | 'icon-right';
         /**
-          * Button Size
+          * Emitted when the button has focus.
          */
-        "size"?: 'small' | 'large';
+        "onClickEvent"?: (event: CustomEvent<void>) => void;
         /**
           * Button type
          */
@@ -264,9 +496,65 @@ declare namespace LocalJSX {
     }
     interface PtcCard {
         /**
-          * The first name
+          * Card Link URL (Optional)
          */
-        "first"?: string;
+        "cardHref"?: string;
+        /**
+          * Card Type Specify Card Type, default to simple card
+         */
+        "cardType"?: 'simple-card' | 'lotti-image-card-1' | 'normal-image-card-1' | 'highlight-card';
+        /**
+          * If this card has Image
+         */
+        "hasImage"?: boolean;
+        /**
+          * If this card has Lottie Image
+         */
+        "hasLottie"?: boolean;
+        /**
+          * If this card has Video
+         */
+        "hasVideo"?: boolean;
+        /**
+          * Card heading
+         */
+        "heading"?: string;
+        /**
+          * Card Heading Arrow (Optional)
+         */
+        "headingArrow"?: boolean;
+        /**
+          * Heading Position These values are available: 'is-placed-left', 'is-placed-left', 'is-placed-right', 'is-placed-normal', 'is-placed-start' Default: "is-placed-left"
+         */
+        "headingPosition"?: string;
+        /**
+          * (optional) Link card rel
+         */
+        "rel"?: string;
+        /**
+          * (optional) Link card target
+         */
+        "target"?: string;
+    }
+    interface PtcDate {
+        /**
+          * Country examples: en-US, zh-CN, zh-TW, fr-FR, ja-JP, ru-RU, de-DE, ko-KR, it-IT, es-ES
+         */
+        "country"?: string | undefined;
+        /**
+          * Day An integer between 1 and 31 representing the day of the month. If omitted, defaults to 1.
+         */
+        "day"?: number;
+        /**
+          * Month An integer between 0 (January) and 11 (December) representing the month.If omitted, defaults to 0.
+         */
+        "month"?: number;
+        /**
+          * Year
+         */
+        "year"?: number;
+    }
+    interface PtcFooter {
     }
     interface PtcImage {
         /**
@@ -278,11 +566,19 @@ declare namespace LocalJSX {
          */
         "src"?: string;
     }
+    interface PtcImg {
+        "imageType"?: 'smart-bg' | 'smart-img';
+        "imgUrl"?: string;
+        "sizeLg"?: string;
+        "sizeMd"?: string;
+        "sizeSm"?: string;
+        "sizeXs"?: string;
+    }
     interface PtcLink {
         /**
           * Rxternal link
          */
-        "external"?: boolean | undefined;
+        "external"?: boolean;
         /**
           * Font Size
          */
@@ -299,16 +595,100 @@ declare namespace LocalJSX {
           * Target
          */
         "target"?: string | undefined;
-        /**
-          * Uppercase
-         */
-        "textTransform"?: 'uppercase' | '';
         /**
           * Theme
          */
         "theme"?: 'simple' | 'arrow';
+        /**
+          * Uppercase
+         */
+        "uppercase"?: boolean;
     }
     interface PtcList {
+        "linkHref"?: string;
+        "listType"?: 'link-primary' | 'link-sub' | 'icon' | 'para-list';
+    }
+    interface PtcLottie {
+        /**
+          * Set Json file src
+         */
+        "jsonSrc"?: string;
+        /**
+          * Animation speed
+         */
+        "speed"?: number;
+    }
+    interface PtcNav {
+    }
+    interface PtcNavItem {
+        /**
+          * If the current nav item is expanded
+         */
+        "ariaExpanded"?: boolean;
+        /**
+          * Depth of the current nav item
+         */
+        "depth"?: number;
+        /**
+          * If the current nav item has children nav items
+         */
+        "hasChildren"?: boolean;
+        /**
+          * Nav Description
+         */
+        "label"?: string;
+        /**
+          * Nav Item Type
+         */
+        "navType"?: 'primary-nav' | 'secondary-nav' | 'primary-footer' | 'secondary-footer' | 'language-nav';
+        /**
+          * Menu Toggle Event
+         */
+        "onMenuItemToggled"?: (event: CustomEvent<any>) => void;
+        /**
+          * If the parent nav item of the current one is expanded
+         */
+        "parentExpanded"?: boolean;
+        /**
+          * Link URL
+         */
+        "url"?: string;
+    }
+    interface PtcOverlay {
+    }
+    interface PtcPara {
+        /**
+          * Paragraph font size
+         */
+        "fontSize"?: 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'xxx-large' | 'xxxx-large';
+        /**
+          * Paragraph font weight
+         */
+        "fontWeight"?: 'w-3' | 'w-4' | 'w-5' | 'w-6' | 'w-7' | 'w-8' | 'w-9';
+        /**
+          * Paragraph Style
+         */
+        "paraStyle"?: 'default' | 'intro' | 'small';
+    }
+    interface PtcPicture {
+        "lazy"?: 'lazy' | 'eager';
+    }
+    interface PtcSpacer {
+        /**
+          * Breakpoint
+         */
+        "breakpoint"?: '' | 'medium' | 'small' | 'large' | 'x-large' | 'xx-large' | 'x-small' | 'xx-small';
+        /**
+          * Direction
+         */
+        "direction"?: 'vertical' | 'horizontal';
+        /**
+          * Spacing Size
+         */
+        "size"?: 'large' | 'medium' | 'small' | 'x-large' | 'x-small' | 'xx-large' | 'xx-small' | 'xxx-large' | 'xxxx-large';
+    }
+    interface PtcSpan {
+        "spanStyle"?: 'link-style' | 'tag-style' | 'nav-style';
     }
     interface PtcTitle {
         /**
@@ -326,12 +706,24 @@ declare namespace LocalJSX {
     }
     interface IntrinsicElements {
         "icon-asset": IconAsset;
+        "list-item": ListItem;
         "my-component": MyComponent;
         "ptc-button": PtcButton;
         "ptc-card": PtcCard;
+        "ptc-date": PtcDate;
+        "ptc-footer": PtcFooter;
         "ptc-image": PtcImage;
+        "ptc-img": PtcImg;
         "ptc-link": PtcLink;
         "ptc-list": PtcList;
+        "ptc-lottie": PtcLottie;
+        "ptc-nav": PtcNav;
+        "ptc-nav-item": PtcNavItem;
+        "ptc-overlay": PtcOverlay;
+        "ptc-para": PtcPara;
+        "ptc-picture": PtcPicture;
+        "ptc-spacer": PtcSpacer;
+        "ptc-span": PtcSpan;
         "ptc-title": PtcTitle;
     }
 }
@@ -340,12 +732,24 @@ declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
             "icon-asset": LocalJSX.IconAsset & JSXBase.HTMLAttributes<HTMLIconAssetElement>;
+            "list-item": LocalJSX.ListItem & JSXBase.HTMLAttributes<HTMLListItemElement>;
             "my-component": LocalJSX.MyComponent & JSXBase.HTMLAttributes<HTMLMyComponentElement>;
             "ptc-button": LocalJSX.PtcButton & JSXBase.HTMLAttributes<HTMLPtcButtonElement>;
             "ptc-card": LocalJSX.PtcCard & JSXBase.HTMLAttributes<HTMLPtcCardElement>;
+            "ptc-date": LocalJSX.PtcDate & JSXBase.HTMLAttributes<HTMLPtcDateElement>;
+            "ptc-footer": LocalJSX.PtcFooter & JSXBase.HTMLAttributes<HTMLPtcFooterElement>;
             "ptc-image": LocalJSX.PtcImage & JSXBase.HTMLAttributes<HTMLPtcImageElement>;
+            "ptc-img": LocalJSX.PtcImg & JSXBase.HTMLAttributes<HTMLPtcImgElement>;
             "ptc-link": LocalJSX.PtcLink & JSXBase.HTMLAttributes<HTMLPtcLinkElement>;
             "ptc-list": LocalJSX.PtcList & JSXBase.HTMLAttributes<HTMLPtcListElement>;
+            "ptc-lottie": LocalJSX.PtcLottie & JSXBase.HTMLAttributes<HTMLPtcLottieElement>;
+            "ptc-nav": LocalJSX.PtcNav & JSXBase.HTMLAttributes<HTMLPtcNavElement>;
+            "ptc-nav-item": LocalJSX.PtcNavItem & JSXBase.HTMLAttributes<HTMLPtcNavItemElement>;
+            "ptc-overlay": LocalJSX.PtcOverlay & JSXBase.HTMLAttributes<HTMLPtcOverlayElement>;
+            "ptc-para": LocalJSX.PtcPara & JSXBase.HTMLAttributes<HTMLPtcParaElement>;
+            "ptc-picture": LocalJSX.PtcPicture & JSXBase.HTMLAttributes<HTMLPtcPictureElement>;
+            "ptc-spacer": LocalJSX.PtcSpacer & JSXBase.HTMLAttributes<HTMLPtcSpacerElement>;
+            "ptc-span": LocalJSX.PtcSpan & JSXBase.HTMLAttributes<HTMLPtcSpanElement>;
             "ptc-title": LocalJSX.PtcTitle & JSXBase.HTMLAttributes<HTMLPtcTitleElement>;
         }
     }

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

@@ -1,3 +1,9 @@
-export declare type CssClassMap = {
+declare type CssClassMap = {
   [className: string]: boolean;
 };
+declare let ResponsiveBgVariables: {
+  envs: string[];
+  selector: string;
+  interval: number;
+};
+export { CssClassMap, ResponsiveBgVariables };