npm - @getpara/core-components - Versions diffs - 1.8.0 → 1.10.0 - Mend

@getpara/core-components 1.8.0 → 1.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (49) hide show

package/dist/cjs/cpsl-col.cjs.entry.js CHANGED Viewed

@@ -34,6 +34,9 @@ const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
 const CpslCol = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.align = 'center';
+        this.justify = 'center';
+        this.gap = '8px';
         this.offset = undefined;
         this.offsetXs = undefined;
         this.offsetSm = undefined;
@@ -134,7 +137,7 @@ const CpslCol = class {
     }
     render() {
         const isRTL = document.dir === 'rtl';
-        return (index.h(index.Host, { key: 'c9d2d0d4c021bc38e672ef6a8db36b1f50f53e2c', style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, index.h("slot", { key: 'a9f61e679573d1ec7cf26ac9837b0fabf9f885eb' })));
+        return (index.h(index.Host, { key: 'f4939676b491eb1d76138f93495ca714338efa34', style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, index.h("slot", { key: '58799b5710715af09184b88c94d46638e78e1f41' })));
     }
 };
 CpslCol.style = CpslColStyle0;

package/dist/cjs/cpsl-col.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"cpsl-col.entry.cjs.js","mappings":"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","names":["forceUpdate","h","Host"],"sources":["src/utils/media.ts","src/components/cpsl-col/cpsl-col.scss?tag=cpsl-col&encapsulation=shadow","src/components/cpsl-col/cpsl-col.tsx"],"sourcesContent":["export const SIZE_TO_MEDIA: any = {\n xs: '(min-width: 0px)',\n sm: '(min-width: 576px)',\n md: '(min-width: 768px)',\n lg: '(min-width: 992px)',\n xl: '(min-width: 1200px)',\n};\n\n// Check if the window matches the media query\n// at the breakpoint passed\n// e.g. matchBreakpoint('sm') => true if screen width exceeds 576px\nexport const matchBreakpoint = (breakpoint: string \| undefined) => {\n if (breakpoint === undefined \|\| breakpoint === '') {\n return true;\n }\n if (typeof window !== 'undefined' && (window as any).matchMedia) {\n const mediaQuery = SIZE_TO_MEDIA[breakpoint];\n return window.matchMedia(mediaQuery).matches;\n }\n return false;\n};\n","@import './cpsl-col.vars';\n\n// Column\n// --------------------------------------------------\n\n:host {\n /*\n @prop --cpsl-grid-columns: The number of total Columns in the Grid\n * @prop --cpsl-grid-column-padding: Padding for the Column\n * @prop --cpsl-grid-column-padding-xs: Padding for the Column on xs screens and up\n * @prop --cpsl-grid-column-padding-sm: Padding for the Column on sm screens and up\n * @prop --cpsl-grid-column-padding-md: Padding for the Column on md screens and up\n * @prop --cpsl-grid-column-padding-lg: Padding for the Column on lg screens and up\n * @prop --cpsl-grid-column-padding-xl: Padding for the Column on xl screens and up\n /\n @include make-breakpoint-padding($grid-column-paddings);\n @include margin(0);\n\n box-sizing: border-box;\n\n position: relative;\n\n flex-basis: 0;\n flex-grow: 1;\n\n width: 100%;\n max-width: 100%;\n min-height: 1px; // Prevent columns from collapsing when empty\n}\n","import { Component, Host, Listen, Prop, forceUpdate, h } from '@stencil/core';\nimport { matchBreakpoint } from '../../utils/media.js';\n\nconst win = typeof (window as any) !== 'undefined' ? (window as any) : undefined;\nconst SUPPORTS_VARS = win && !!(win.CSS && win.CSS.supports && win.CSS.supports('--a: 0'));\nconst BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];\n\n@Component({\n tag: 'cpsl-col',\n styleUrl: 'cpsl-col.scss',\n shadow: true,\n})\nexport class CpslCol {\n /\n The amount to offset the column, in terms of how many columns it should shift to the end\n * of the total available.\n /\n @Prop() offset?: string;\n\n /\n The amount to offset the column for xs screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() offsetXs?: string;\n\n /\n The amount to offset the column for sm screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() offsetSm?: string;\n\n /\n The amount to offset the column for md screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() offsetMd?: string;\n\n /\n The amount to offset the column for lg screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() offsetLg?: string;\n\n /\n The amount to offset the column for xl screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() offsetXl?: string;\n\n /\n The amount to pull the column, in terms of how many columns it should shift to the start of\n * the total available.\n /\n @Prop() pull?: string;\n\n /\n The amount to pull the column for xs screens, in terms of how many columns it should shift\n * to the start of the total available.\n /\n @Prop() pullXs?: string;\n /\n The amount to pull the column for sm screens, in terms of how many columns it should shift\n * to the start of the total available.\n /\n @Prop() pullSm?: string;\n /\n The amount to pull the column for md screens, in terms of how many columns it should shift\n * to the start of the total available.\n /\n @Prop() pullMd?: string;\n /\n The amount to pull the column for lg screens, in terms of how many columns it should shift\n * to the start of the total available.\n /\n @Prop() pullLg?: string;\n /\n The amount to pull the column for xl screens, in terms of how many columns it should shift\n * to the start of the total available.\n /\n @Prop() pullXl?: string;\n\n /\n The amount to push the column, in terms of how many columns it should shift to the end\n * of the total available.\n /\n @Prop() push?: string;\n\n /\n The amount to push the column for xs screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() pushXs?: string;\n\n /\n The amount to push the column for sm screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() pushSm?: string;\n\n /\n The amount to push the column for md screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() pushMd?: string;\n\n /\n The amount to push the column for lg screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() pushLg?: string;\n\n /\n The amount to push the column for xl screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() pushXl?: string;\n\n /\n The size of the column, in terms of how many columns it should take up out of the total\n * available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() size?: string;\n\n /\n The size of the column for xs screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() sizeXs?: string;\n\n /\n The size of the column for sm screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() sizeSm?: string;\n\n /\n The size of the column for md screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() sizeMd?: string;\n\n /\n The size of the column for lg screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() sizeLg?: string;\n\n /\n The size of the column for xl screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() sizeXl?: string;\n\n @Listen('resize', { target: 'window' })\n onResize() {\n forceUpdate(this);\n }\n\n // Loop through all of the breakpoints to see if the media query\n // matches and grab the column value from the relevant prop if so\n private getColumns(property: string) {\n let matched;\n\n for (const breakpoint of BREAKPOINTS) {\n const matches = matchBreakpoint(breakpoint);\n\n // Grab the value of the property, if it exists and our\n // media query matches we return the value\n const columns = (this as any)[property + breakpoint.charAt(0).toUpperCase() + breakpoint.slice(1)];\n\n if (matches && columns !== undefined) {\n matched = columns;\n }\n }\n\n // Return the last matched columns since the breakpoints\n // increase in size and we want to return the largest match\n return matched;\n }\n\n private calculateSize() {\n const columns = this.getColumns('size');\n\n // If size wasn't set for any breakpoint\n // or if the user set the size without a value\n // it means we need to stick with the default and return\n // e.g. <ion-col size-md>\n if (!columns \|\| columns === '') {\n return;\n }\n\n // If the size is set to auto then don't calculate a size\n const colSize =\n columns === 'auto'\n ? 'auto'\n : // If CSS supports variables we should use the grid columns var\n SUPPORTS_VARS\n ? `calc(calc(${columns} / var(--ion-grid-columns, 12)) 100%)`\n : // Convert the columns to a percentage by dividing by the total number\n // of columns (12) and then multiplying by 100\n (columns / 12) * 100 + '%';\n\n return {\n 'flex': `0 0 ${colSize}`,\n 'width': `${colSize}`,\n 'max-width': `${colSize}`,\n };\n }\n\n // Called by push, pull, and offset since they use the same calculations\n private calculatePosition(property: string, modifier: string) {\n const columns = this.getColumns(property);\n\n if (!columns) {\n return;\n }\n\n // If the number of columns passed are greater than 0 and less than\n // 12 we can position the column, else default to auto\n const amount = SUPPORTS_VARS\n ? // If CSS supports variables we should use the grid columns var\n `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`\n : // Convert the columns to a percentage by dividing by the total number\n // of columns (12) and then multiplying by 100\n columns > 0 && columns < 12\n ? (columns / 12) * 100 + '%'\n : 'auto';\n\n return {\n [modifier]: amount,\n };\n }\n\n private calculateOffset(isRTL: boolean) {\n return this.calculatePosition('offset', isRTL ? 'margin-right' : 'margin-left');\n }\n\n private calculatePull(isRTL: boolean) {\n return this.calculatePosition('pull', isRTL ? 'left' : 'right');\n }\n\n private calculatePush(isRTL: boolean) {\n return this.calculatePosition('push', isRTL ? 'right' : 'left');\n }\n\n render() {\n const isRTL = document.dir === 'rtl';\n return (\n <Host\n style={{\n ...this.calculateOffset(isRTL),\n ...this.calculatePull(isRTL),\n ...this.calculatePush(isRTL),\n ...this.calculateSize(),\n }}\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"cpsl-col.entry.cjs.js","mappings":"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","names":["forceUpdate","h","Host"],"sources":["src/utils/media.ts","src/components/cpsl-col/cpsl-col.scss?tag=cpsl-col&encapsulation=shadow","src/components/cpsl-col/cpsl-col.tsx"],"sourcesContent":["export const SIZE_TO_MEDIA: any = {\n xs: '(min-width: 0px)',\n sm: '(min-width: 576px)',\n md: '(min-width: 768px)',\n lg: '(min-width: 992px)',\n xl: '(min-width: 1200px)',\n};\n\n// Check if the window matches the media query\n// at the breakpoint passed\n// e.g. matchBreakpoint('sm') => true if screen width exceeds 576px\nexport const matchBreakpoint = (breakpoint: string \| undefined) => {\n if (breakpoint === undefined \|\| breakpoint === '') {\n return true;\n }\n if (typeof window !== 'undefined' && (window as any).matchMedia) {\n const mediaQuery = SIZE_TO_MEDIA[breakpoint];\n return window.matchMedia(mediaQuery).matches;\n }\n return false;\n};\n","@import './cpsl-col.vars';\n\n// Column\n// --------------------------------------------------\n\n:host {\n /*\n @prop --cpsl-grid-columns: The number of total Columns in the Grid\n * @prop --cpsl-grid-column-padding: Padding for the Column\n * @prop --cpsl-grid-column-padding-xs: Padding for the Column on xs screens and up\n * @prop --cpsl-grid-column-padding-sm: Padding for the Column on sm screens and up\n * @prop --cpsl-grid-column-padding-md: Padding for the Column on md screens and up\n * @prop --cpsl-grid-column-padding-lg: Padding for the Column on lg screens and up\n * @prop --cpsl-grid-column-padding-xl: Padding for the Column on xl screens and up\n /\n @include make-breakpoint-padding($grid-column-paddings);\n @include margin(0);\n\n box-sizing: border-box;\n\n position: relative;\n\n flex-basis: 0;\n flex-grow: 1;\n\n width: 100%;\n max-width: 100%;\n min-height: 1px; // Prevent columns from collapsing when empty\n}\n","import { Component, Host, Listen, Prop, forceUpdate, h } from '@stencil/core';\nimport { matchBreakpoint } from '../../utils/media.js';\n\nconst win = typeof (window as any) !== 'undefined' ? (window as any) : undefined;\nconst SUPPORTS_VARS = win && !!(win.CSS && win.CSS.supports && win.CSS.supports('--a: 0'));\nconst BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];\n\n@Component({\n tag: 'cpsl-col',\n styleUrl: 'cpsl-col.scss',\n shadow: true,\n})\nexport class CpslCol {\n @Prop() align?: React.CSSProperties['alignItems'] = 'center';\n\n @Prop() justify?: React.CSSProperties['justifyContent'] = 'center';\n\n @Prop() gap?: React.CSSProperties['gap'] = '8px';\n\n /\n The amount to offset the column, in terms of how many columns it should shift to the end\n * of the total available.\n /\n @Prop() offset?: string;\n\n /\n The amount to offset the column for xs screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() offsetXs?: string;\n\n /\n The amount to offset the column for sm screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() offsetSm?: string;\n\n /\n The amount to offset the column for md screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() offsetMd?: string;\n\n /\n The amount to offset the column for lg screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() offsetLg?: string;\n\n /\n The amount to offset the column for xl screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() offsetXl?: string;\n\n /\n The amount to pull the column, in terms of how many columns it should shift to the start of\n * the total available.\n /\n @Prop() pull?: string;\n\n /\n The amount to pull the column for xs screens, in terms of how many columns it should shift\n * to the start of the total available.\n /\n @Prop() pullXs?: string;\n /\n The amount to pull the column for sm screens, in terms of how many columns it should shift\n * to the start of the total available.\n /\n @Prop() pullSm?: string;\n /\n The amount to pull the column for md screens, in terms of how many columns it should shift\n * to the start of the total available.\n /\n @Prop() pullMd?: string;\n /\n The amount to pull the column for lg screens, in terms of how many columns it should shift\n * to the start of the total available.\n /\n @Prop() pullLg?: string;\n /\n The amount to pull the column for xl screens, in terms of how many columns it should shift\n * to the start of the total available.\n /\n @Prop() pullXl?: string;\n\n /\n The amount to push the column, in terms of how many columns it should shift to the end\n * of the total available.\n /\n @Prop() push?: string;\n\n /\n The amount to push the column for xs screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() pushXs?: string;\n\n /\n The amount to push the column for sm screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() pushSm?: string;\n\n /\n The amount to push the column for md screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() pushMd?: string;\n\n /\n The amount to push the column for lg screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() pushLg?: string;\n\n /\n The amount to push the column for xl screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() pushXl?: string;\n\n /\n The size of the column, in terms of how many columns it should take up out of the total\n * available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() size?: string;\n\n /\n The size of the column for xs screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() sizeXs?: string;\n\n /\n The size of the column for sm screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() sizeSm?: string;\n\n /\n The size of the column for md screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() sizeMd?: string;\n\n /\n The size of the column for lg screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() sizeLg?: string;\n\n /\n The size of the column for xl screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() sizeXl?: string;\n\n @Listen('resize', { target: 'window' })\n onResize() {\n forceUpdate(this);\n }\n\n // Loop through all of the breakpoints to see if the media query\n // matches and grab the column value from the relevant prop if so\n private getColumns(property: string) {\n let matched;\n\n for (const breakpoint of BREAKPOINTS) {\n const matches = matchBreakpoint(breakpoint);\n\n // Grab the value of the property, if it exists and our\n // media query matches we return the value\n const columns = (this as any)[property + breakpoint.charAt(0).toUpperCase() + breakpoint.slice(1)];\n\n if (matches && columns !== undefined) {\n matched = columns;\n }\n }\n\n // Return the last matched columns since the breakpoints\n // increase in size and we want to return the largest match\n return matched;\n }\n\n private calculateSize() {\n const columns = this.getColumns('size');\n\n // If size wasn't set for any breakpoint\n // or if the user set the size without a value\n // it means we need to stick with the default and return\n // e.g. <ion-col size-md>\n if (!columns \|\| columns === '') {\n return;\n }\n\n // If the size is set to auto then don't calculate a size\n const colSize =\n columns === 'auto'\n ? 'auto'\n : // If CSS supports variables we should use the grid columns var\n SUPPORTS_VARS\n ? `calc(calc(${columns} / var(--ion-grid-columns, 12)) 100%)`\n : // Convert the columns to a percentage by dividing by the total number\n // of columns (12) and then multiplying by 100\n (columns / 12) * 100 + '%';\n\n return {\n 'flex': `0 0 ${colSize}`,\n 'width': `${colSize}`,\n 'max-width': `${colSize}`,\n };\n }\n\n // Called by push, pull, and offset since they use the same calculations\n private calculatePosition(property: string, modifier: string) {\n const columns = this.getColumns(property);\n\n if (!columns) {\n return;\n }\n\n // If the number of columns passed are greater than 0 and less than\n // 12 we can position the column, else default to auto\n const amount = SUPPORTS_VARS\n ? // If CSS supports variables we should use the grid columns var\n `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`\n : // Convert the columns to a percentage by dividing by the total number\n // of columns (12) and then multiplying by 100\n columns > 0 && columns < 12\n ? (columns / 12) * 100 + '%'\n : 'auto';\n\n return {\n [modifier]: amount,\n };\n }\n\n private calculateOffset(isRTL: boolean) {\n return this.calculatePosition('offset', isRTL ? 'margin-right' : 'margin-left');\n }\n\n private calculatePull(isRTL: boolean) {\n return this.calculatePosition('pull', isRTL ? 'left' : 'right');\n }\n\n private calculatePush(isRTL: boolean) {\n return this.calculatePosition('push', isRTL ? 'right' : 'left');\n }\n\n render() {\n const isRTL = document.dir === 'rtl';\n return (\n <Host\n style={{\n ...this.calculateOffset(isRTL),\n ...this.calculatePull(isRTL),\n ...this.calculatePush(isRTL),\n ...this.calculateSize(),\n }}\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/cpsl-row.cjs.entry.js CHANGED Viewed

@@ -4,15 +4,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-65f57499.js');
-const cpslRowCss = ":host{display:flex;flex-wrap:wrap}";
+const cpslRowCss = ":host{display:flex;flex-direction:var(--direction, row);align-items:var(--align);justify-content:var(--justify);gap:var(--gap);flex-wrap:wrap}";
 const CpslRowStyle0 = cpslRowCss;
 const CpslRow = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.col = false;
+        this.align = 'center';
+        this.justify = 'center';
+        this.gap = '8px';
     }
     render() {
-        return (index.h(index.Host, { key: '29ed5413502c575ff74a496ae6ee83ce375635b0' }, index.h("slot", { key: '864af3ce3db31f98f7effb837fabec43f5a0a6ac' })));
+        return (index.h(index.Host, { key: '355dfc5748c22b4569db7835e8f2f82e45fdff2e', style: { ['--align']: this.align, ['--justify']: this.justify, ['--gap']: this.gap.toString(), ['--direction']: this.col ? 'column' : 'row' } }, index.h("slot", { key: '1025e7cc78b6a9faee3c7154a14f3218959dabe6' })));
     }
 };
 CpslRow.style = CpslRowStyle0;

package/dist/cjs/cpsl-row.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"cpsl-row.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,~~oCAAoC~~,CAAC;~~AACxD~~,sBAAe,UAAU;;MCMZ,OAAO~~;;;;IAClB~~,MAAM;QACJ,QACEA,QAACC,UAAI,~~uDACHD~~,oEAAa,CACR,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/cpsl-row/cpsl-row.scss?tag=cpsl-row&encapsulation=shadow","src/components/cpsl-row/cpsl-row.tsx"],"sourcesContent":["@import './cpsl-row.vars';\n\n// Row\n// --------------------------------------------------\n\n:host {\n display: flex;\n\n flex-wrap: wrap;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n@Component({\n tag: 'cpsl-row',\n styleUrl: 'cpsl-row.scss',\n shadow: true,\n})\nexport class CpslRow {\n render() {\n return (\n <Host>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"cpsl-row.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,gJAAgJ,CAAC;AACpK,sBAAe,UAAU;;MCMZ,OAAO;;;mBACJ,KAAK;qBAEiC,QAAQ;uBAEF,QAAQ;mBAEvB,KAAK;;IAEhD,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,KAAK,EAAE,EAAE,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,EAAE,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,GAAG,QAAQ,GAAG,KAAK,EAAE,IACjJD,oEAAa,CACR,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/cpsl-row/cpsl-row.scss?tag=cpsl-row&encapsulation=shadow","src/components/cpsl-row/cpsl-row.tsx"],"sourcesContent":["@import './cpsl-row.vars';\n\n// Row\n// --------------------------------------------------\n\n:host {\n display: flex;\n flex-direction: var(--direction, row);\n align-items: var(--align);\n justify-content: var(--justify);\n gap: var(--gap);\n flex-wrap: wrap;\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'cpsl-row',\n styleUrl: 'cpsl-row.scss',\n shadow: true,\n})\nexport class CpslRow {\n @Prop() col = false;\n\n @Prop() align?: React.CSSProperties['alignItems'] = 'center';\n\n @Prop() justify?: React.CSSProperties['justifyContent'] = 'center';\n\n @Prop() gap?: React.CSSProperties['gap'] = '8px';\n\n render() {\n return (\n <Host style={{ ['--align']: this.align, ['--justify']: this.justify, ['--gap']: this.gap.toString(), ['--direction']: this.col ? 'column' : 'row' }}>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/loader.cjs.js CHANGED Viewed

@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["cpsl-hero.cjs",[[1,"cpsl-hero",{"height":[2],"hideFadeOut":[4,"hide-fade-out"],"variant":[513],"title":[513],"subtitle":[513],"withDefaultTheme":[4,"with-default-theme"]}]]],["cpsl-modal-v2.cjs",[[1,"cpsl-modal-v2",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"elevated":[4],"noOverlay":[4,"no-overlay"],"open":[4],"zIndexOverride":[2,"z-index-override"]},null,{"open":["toggleHeight"]}]]],["cpsl-nav-button.cjs",[[1,"cpsl-nav-button",{"disabled":[516],"exactMainRouteMatch":[4,"exact-main-route-match"],"exactSubRouteMatch":[4,"exact-sub-route-match"],"route":[1],"subRoutes":[16],"path":[1]}]]],["cpsl-col.cjs",[[1,"cpsl-col",{"offset":[1],"offsetXs":[1,"offset-xs"],"offsetSm":[1,"offset-sm"],"offsetMd":[1,"offset-md"],"offsetLg":[1,"offset-lg"],"offsetXl":[1,"offset-xl"],"pull":[1],"pullXs":[1,"pull-xs"],"pullSm":[1,"pull-sm"],"pullMd":[1,"pull-md"],"pullLg":[1,"pull-lg"],"pullXl":[1,"pull-xl"],"push":[1],"pushXs":[1,"push-xs"],"pushSm":[1,"push-sm"],"pushMd":[1,"push-md"],"pushLg":[1,"push-lg"],"pushXl":[1,"push-xl"],"size":[1],"sizeXs":[1,"size-xs"],"sizeSm":[1,"size-sm"],"sizeMd":[1,"size-md"],"sizeLg":[1,"size-lg"],"sizeXl":[1,"size-xl"]},[[9,"resize","onResize"]]]]],["cpsl-grid.cjs",[[1,"cpsl-grid",{"fixed":[4]}]]],["cpsl-identicon.cjs",[[1,"cpsl-identicon",{"hash":[1],"size":[1],"variant":[1]}]]],["cpsl-info-box.cjs",[[1,"cpsl-info-box"]]],["cpsl-row.cjs",[[1,"cpsl-row"]]],["cpsl-alert_34.cjs",[[1,"cpsl-pagination",{"initialPage":[2,"initial-page"],"totalPages":[2,"total-pages"],"visiblePages":[1026,"visible-pages"],"currentPage":[32]},null,{"currentPage":["watchChange"]}],[1,"cpsl-select",{"anchorElId":[1,"anchor-el-id"],"autoWidth":[4,"auto-width"],"disabled":[4],"dropdownMaxHeight":[2,"dropdown-max-height"],"errorText":[1,"error-text"],"formatValue":[16],"helperText":[1,"helper-text"],"id":[1],"icon":[1],"label":[1],"multiple":[4],"noIconAnimation":[4,"no-icon-animation"],"placeholder":[1],"required":[4],"selectedValue":[1,"selected-value"],"showFormattedSelectedItem":[4,"show-formatted-selected-item"],"showOptionalLabel":[4,"show-optional-label"],"showSearch":[4,"show-search"],"searchPlaceholder":[1,"search-placeholder"],"selectedItemColor":[1,"selected-item-color"],"selectedItemVariant":[1,"selected-item-variant"],"selectedItemWeight":[1,"selected-item-weight"],"anchorEl":[32],"hasFocus":[32],"popoverOpen":[32],"hasSelectedItem":[32]},[[0,"cpslSelectItemClick","selectItemClickHandler"],[0,"cpslOpen","onPopoverOpen"],[0,"cpslClose","onPopoverClose"]],{"selectedValue":["onValueChange","handleValueChange"]}],[1,"cpsl-file-upload",{"disabled":[516],"errorText":[1,"error-text"],"externalFilename":[1,"external-filename"],"externalSrc":[1,"external-src"],"fileTypes":[16],"helperText":[1,"helper-text"],"label":[1],"required":[4],"showOptionalLabel":[4,"show-optional-label"],"uploadFile":[16],"file":[32],"dragOver":[32],"dragError":[32],"isUploading":[32],"uploadError":[32]}],[1,"cpsl-auth-modal",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"noOverlay":[4,"no-overlay"],"open":[4],"zIndexOverride":[2,"z-index-override"],"hasFooter":[32],"isMobile":[32]},null,{"open":["toggleModal"]}],[1,"cpsl-alert",{"icon":[1],"noIcon":[4,"no-icon"],"variant":[1],"filled":[4]}],[1,"cpsl-checkbox",{"checked":[4]}],[1,"cpsl-code-input",{"code":[1025],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"length":[2],"type":[1]}],[1,"cpsl-drawer",{"anchor":[1],"anchorPosition":[2,"anchor-position"],"noOverlay":[4,"no-overlay"],"open":[4],"size":[8],"transitionDuration":[2,"transition-duration"],"transitionFunction":[1,"transition-function"],"variant":[1],"zIndexOverride":[2,"z-index-override"],"closedAnchorPosition":[32],"showTransition":[32]}],[1,"cpsl-icon-group",{"expandFrom":[1,"expand-from"],"disabled":[4],"icons":[16],"isHovered":[32]}],[1,"cpsl-slide-button",{"disabled":[4],"endIcon":[1,"end-icon"],"endText":[1,"end-text"],"startIcon":[1,"start-icon"],"startText":[1,"start-text"]}],[1,"cpsl-table",{"hasHorizontalScroll":[32],"hasVerticalScroll":[32]}],[1,"cpsl-tile-button",{"src":[1],"icon":[1]}],[1,"cpsl-app-bar",{"height":[2],"position":[1],"zIndexOverride":[2,"z-index-override"]}],[1,"cpsl-avatar",{"alt":[1],"src":[1],"size":[1],"variant":[1]}],[1,"cpsl-divider"],[1,"cpsl-dropdown",{"width":[1],"hasCpslSearch":[4,"has-cpsl-search"],"items":[16],"selectedItem":[1040],"isOpen":[32],"searchQuery":[32],"filteredItems":[32]},[[9,"resize","handleResize"]],{"selectedItem":["handleSelectedItemChange"],"isOpen":["handleOpenChange"]}],[1,"cpsl-nav-button-group"],[1,"cpsl-pill",{"text":[1]}],[1,"cpsl-progress-indicator",{"totalSteps":[2,"total-steps"],"step":[2]}],[1,"cpsl-qr-code",{"url":[1],"imageSrc":[1,"image-src"],"size":[2],"icon":[1]}],[1,"cpsl-radio",{"checked":[4]}],[1,"cpsl-select-item",{"selected":[4],"value":[1]}],[1,"cpsl-switch",{"checked":[4]}],[1,"cpsl-tab",{"selected":[4],"tab":[1]},[[8,"cpslTabsChanged","onTabsChanged"],[8,"cpslTabsInit","onTabsInit"]]],[1,"cpsl-tabs",{"fullWidth":[4,"full-width"],"selectedTab":[1,"selected-tab"],"selectedTabRect":[32],"loaded":[32]},[[8,"cpslTabButtonSizeChange","onTabSizeChange"]],{"fullWidth":["updateSlider"],"selectedTab":["updateTab"]}],[1,"cpsl-button-group",{"selectedId":[1,"selected-id"]},null,{"selectedId":["selectItem"]}],[1,"cpsl-input",{"as":[1],"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"noAutoDisable":[4,"no-auto-disable"],"autofocus":[4],"autoselect":[4],"disabled":[4],"contrastText":[4,"contrast-text"],"enterkeyhint":[1],"errorText":[1,"error-text"],"mask":[1],"isPhone":[4,"is-phone"],"helperText":[1,"helper-text"],"inputmode":[1],"label":[1],"max":[8],"maxlength":[2],"min":[8],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"rows":[2],"showOptionalLabel":[4,"show-optional-label"],"spellcheck":[4],"startIconSrc":[1,"start-icon-src"],"startIcon":[1,"start-icon"],"step":[1],"type":[1],"value":[1025],"hasFocus":[32]},null,{"disabled":["handleDisable"],"mask":["handleSetupMask"],"value":["handleValueChange"]}],[1,"cpsl-popover",{"anchorEl":[16],"anchorOriginHorizontal":[1,"anchor-origin-horizontal"],"anchorOriginVertical":[1,"anchor-origin-vertical"],"autoWidth":[4,"auto-width"],"disabled":[4],"preventBlur":[4,"prevent-blur"],"transformOriginHorizontal":[1,"transform-origin-horizontal"],"transformOriginVertical":[1,"transform-origin-vertical"],"triggerAction":[1,"trigger-action"],"trigger":[1],"windowPadding":[2,"window-padding"],"open":[32],"hasSetInitialPosition":[32],"positionX":[32],"positionY":[32],"closePopover":[64]},null,{"trigger":["onTriggerChange"],"triggerAction":["onTriggerChange"],"preventBlur":["onTriggerChange"],"anchorOriginHorizontal":["onAnchorChange"],"anchorOriginVertical":["onAnchorChange"],"open":["onOpenChange"]}],[1,"cpsl-spinner",{"variant":[1],"size":[2],"barWidth":[2,"bar-width"],"speed":[2]}],[1,"cpsl-button",{"as":[1],"disabled":[516],"fullWidth":[4,"full-width"],"href":[1],"size":[1],"target":[1],"type":[1],"variant":[513]}],[1,"cpsl-card"],[1,"cpsl-overlay",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"open":[4],"zIndexOverride":[2,"z-index-override"]},null,{"open":["toggleHeight"]}],[1,"cpsl-text",{"color":[1],"variant":[1],"weight":[1]}],[1,"cpsl-icon",{"src":[1],"size":[1],"icon":[1]}]]]], options);
+  return index.bootstrapLazy([["cpsl-hero.cjs",[[1,"cpsl-hero",{"height":[2],"hideFadeOut":[4,"hide-fade-out"],"variant":[513],"title":[513],"subtitle":[513],"withDefaultTheme":[4,"with-default-theme"]}]]],["cpsl-modal-v2.cjs",[[1,"cpsl-modal-v2",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"elevated":[4],"noOverlay":[4,"no-overlay"],"open":[4],"zIndexOverride":[2,"z-index-override"]},null,{"open":["toggleHeight"]}]]],["cpsl-nav-button.cjs",[[1,"cpsl-nav-button",{"disabled":[516],"exactMainRouteMatch":[4,"exact-main-route-match"],"exactSubRouteMatch":[4,"exact-sub-route-match"],"route":[1],"subRoutes":[16],"path":[1]}]]],["cpsl-col.cjs",[[1,"cpsl-col",{"align":[1],"justify":[1],"gap":[8],"offset":[1],"offsetXs":[1,"offset-xs"],"offsetSm":[1,"offset-sm"],"offsetMd":[1,"offset-md"],"offsetLg":[1,"offset-lg"],"offsetXl":[1,"offset-xl"],"pull":[1],"pullXs":[1,"pull-xs"],"pullSm":[1,"pull-sm"],"pullMd":[1,"pull-md"],"pullLg":[1,"pull-lg"],"pullXl":[1,"pull-xl"],"push":[1],"pushXs":[1,"push-xs"],"pushSm":[1,"push-sm"],"pushMd":[1,"push-md"],"pushLg":[1,"push-lg"],"pushXl":[1,"push-xl"],"size":[1],"sizeXs":[1,"size-xs"],"sizeSm":[1,"size-sm"],"sizeMd":[1,"size-md"],"sizeLg":[1,"size-lg"],"sizeXl":[1,"size-xl"]},[[9,"resize","onResize"]]]]],["cpsl-grid.cjs",[[1,"cpsl-grid",{"fixed":[4]}]]],["cpsl-identicon.cjs",[[1,"cpsl-identicon",{"hash":[1],"size":[1],"variant":[1]}]]],["cpsl-info-box.cjs",[[1,"cpsl-info-box"]]],["cpsl-row.cjs",[[1,"cpsl-row",{"col":[4],"align":[1],"justify":[1],"gap":[8]}]]],["cpsl-alert_34.cjs",[[1,"cpsl-pagination",{"initialPage":[2,"initial-page"],"totalPages":[2,"total-pages"],"visiblePages":[1026,"visible-pages"],"currentPage":[32]},null,{"currentPage":["watchChange"]}],[1,"cpsl-select",{"anchorElId":[1,"anchor-el-id"],"autoWidth":[4,"auto-width"],"disabled":[4],"dropdownMaxHeight":[2,"dropdown-max-height"],"errorText":[1,"error-text"],"formatValue":[16],"helperText":[1,"helper-text"],"id":[1],"icon":[1],"label":[1],"multiple":[4],"noIconAnimation":[4,"no-icon-animation"],"placeholder":[1],"required":[4],"selectedValue":[1,"selected-value"],"showFormattedSelectedItem":[4,"show-formatted-selected-item"],"showOptionalLabel":[4,"show-optional-label"],"showSearch":[4,"show-search"],"searchPlaceholder":[1,"search-placeholder"],"selectedItemColor":[1,"selected-item-color"],"selectedItemVariant":[1,"selected-item-variant"],"selectedItemWeight":[1,"selected-item-weight"],"anchorEl":[32],"hasFocus":[32],"popoverOpen":[32],"hasSelectedItem":[32]},[[0,"cpslSelectItemClick","selectItemClickHandler"],[0,"cpslOpen","onPopoverOpen"],[0,"cpslClose","onPopoverClose"]],{"selectedValue":["onValueChange","handleValueChange"]}],[1,"cpsl-file-upload",{"disabled":[516],"errorText":[1,"error-text"],"externalFilename":[1,"external-filename"],"externalSrc":[1,"external-src"],"fileTypes":[16],"helperText":[1,"helper-text"],"label":[1],"required":[4],"showOptionalLabel":[4,"show-optional-label"],"uploadFile":[16],"file":[32],"dragOver":[32],"dragError":[32],"isUploading":[32],"uploadError":[32]}],[1,"cpsl-auth-modal",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"noOverlay":[4,"no-overlay"],"open":[4],"zIndexOverride":[2,"z-index-override"],"hasFooter":[32],"isMobile":[32]},null,{"open":["toggleModal"]}],[1,"cpsl-alert",{"icon":[1],"noIcon":[4,"no-icon"],"variant":[1],"filled":[4]}],[1,"cpsl-checkbox",{"checked":[4]}],[1,"cpsl-code-input",{"code":[1025],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"length":[2],"type":[1]}],[1,"cpsl-drawer",{"anchor":[1],"anchorPosition":[2,"anchor-position"],"noOverlay":[4,"no-overlay"],"open":[4],"size":[8],"transitionDuration":[2,"transition-duration"],"transitionFunction":[1,"transition-function"],"variant":[1],"zIndexOverride":[2,"z-index-override"],"closedAnchorPosition":[32],"showTransition":[32]}],[1,"cpsl-icon-group",{"expandFrom":[1,"expand-from"],"disabled":[4],"icons":[16],"isHovered":[32]}],[1,"cpsl-slide-button",{"disabled":[4],"endIcon":[1,"end-icon"],"endText":[1,"end-text"],"startIcon":[1,"start-icon"],"startText":[1,"start-text"]}],[1,"cpsl-table",{"hasHorizontalScroll":[32],"hasVerticalScroll":[32]}],[1,"cpsl-tile-button",{"src":[1],"icon":[1]}],[1,"cpsl-app-bar",{"height":[2],"position":[1],"zIndexOverride":[2,"z-index-override"]}],[1,"cpsl-avatar",{"alt":[1],"src":[1],"size":[1],"variant":[1]}],[1,"cpsl-divider"],[1,"cpsl-dropdown",{"width":[1],"hasCpslSearch":[4,"has-cpsl-search"],"items":[16],"selectedItem":[1040],"isOpen":[32],"searchQuery":[32],"filteredItems":[32]},[[9,"resize","handleResize"]],{"selectedItem":["handleSelectedItemChange"],"isOpen":["handleOpenChange"]}],[1,"cpsl-nav-button-group"],[1,"cpsl-pill",{"text":[1]}],[1,"cpsl-progress-indicator",{"totalSteps":[2,"total-steps"],"step":[2]}],[1,"cpsl-qr-code",{"url":[1],"imageSrc":[1,"image-src"],"size":[2],"icon":[1]}],[1,"cpsl-radio",{"checked":[4]}],[1,"cpsl-select-item",{"selected":[4],"value":[1]}],[1,"cpsl-switch",{"checked":[4]}],[1,"cpsl-tab",{"selected":[4],"tab":[1]},[[8,"cpslTabsChanged","onTabsChanged"],[8,"cpslTabsInit","onTabsInit"]]],[1,"cpsl-tabs",{"fullWidth":[4,"full-width"],"selectedTab":[1,"selected-tab"],"selectedTabRect":[32],"loaded":[32]},[[8,"cpslTabButtonSizeChange","onTabSizeChange"]],{"fullWidth":["updateSlider"],"selectedTab":["updateTab"]}],[1,"cpsl-button-group",{"selectedId":[1,"selected-id"]},null,{"selectedId":["selectItem"]}],[1,"cpsl-input",{"as":[1],"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"noAutoDisable":[4,"no-auto-disable"],"autofocus":[4],"autoselect":[4],"disabled":[4],"contrastText":[4,"contrast-text"],"enterkeyhint":[1],"errorText":[1,"error-text"],"fitContent":[4,"fit-content"],"mask":[1],"isPhone":[4,"is-phone"],"helperText":[1,"helper-text"],"inputmode":[1],"label":[1],"max":[8],"maxlength":[2],"min":[8],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"rows":[2],"showOptionalLabel":[4,"show-optional-label"],"spellcheck":[4],"startIconSrc":[1,"start-icon-src"],"startIcon":[1,"start-icon"],"step":[1],"type":[1],"value":[1025],"hasFocus":[32]},null,{"disabled":["handleDisable"],"mask":["handleSetupMask"],"value":["handleValueChange"]}],[1,"cpsl-popover",{"anchorEl":[16],"anchorOriginHorizontal":[1,"anchor-origin-horizontal"],"anchorOriginVertical":[1,"anchor-origin-vertical"],"autoWidth":[4,"auto-width"],"disabled":[4],"preventBlur":[4,"prevent-blur"],"transformOriginHorizontal":[1,"transform-origin-horizontal"],"transformOriginVertical":[1,"transform-origin-vertical"],"triggerAction":[1,"trigger-action"],"trigger":[1],"windowPadding":[2,"window-padding"],"open":[32],"hasSetInitialPosition":[32],"positionX":[32],"positionY":[32],"closePopover":[64]},null,{"trigger":["onTriggerChange"],"triggerAction":["onTriggerChange"],"preventBlur":["onTriggerChange"],"anchorOriginHorizontal":["onAnchorChange"],"anchorOriginVertical":["onAnchorChange"],"open":["onOpenChange"]}],[1,"cpsl-spinner",{"variant":[1],"size":[2],"barWidth":[2,"bar-width"],"speed":[2]}],[1,"cpsl-button",{"as":[1],"disabled":[516],"fullWidth":[4,"full-width"],"href":[1],"size":[1],"target":[1],"type":[1],"variant":[513]}],[1,"cpsl-card"],[1,"cpsl-overlay",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"open":[4],"zIndexOverride":[2,"z-index-override"]},null,{"open":["toggleHeight"]}],[1,"cpsl-text",{"color":[1],"variant":[1],"weight":[1]}],[1,"cpsl-icon",{"src":[1],"size":[1],"invert":[4],"inset":[1],"icon":[1]}]]]], options);
 };
 exports.setNonce = index.setNonce;

package/dist/collection/components/cpsl-col/cpsl-col.js CHANGED Viewed

@@ -5,6 +5,9 @@ const SUPPORTS_VARS = win && !!(win.CSS && win.CSS.supports && win.CSS.supports(
 const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
 export class CpslCol {
     constructor() {
+        this.align = 'center';
+        this.justify = 'center';
+        this.gap = '8px';
         this.offset = undefined;
         this.offsetXs = undefined;
         this.offsetSm = undefined;
@@ -105,7 +108,7 @@ export class CpslCol {
     }
     render() {
         const isRTL = document.dir === 'rtl';
-        return (h(Host, { key: 'c9d2d0d4c021bc38e672ef6a8db36b1f50f53e2c', style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: 'a9f61e679573d1ec7cf26ac9837b0fabf9f885eb' })));
+        return (h(Host, { key: 'f4939676b491eb1d76138f93495ca714338efa34', style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: '58799b5710715af09184b88c94d46638e78e1f41' })));
     }
     static get is() { return "cpsl-col"; }
     static get encapsulation() { return "shadow"; }
@@ -121,6 +124,75 @@ export class CpslCol {
     }
     static get properties() {
         return {
+            "align": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "React.CSSProperties['alignItems']",
+                    "resolved": "\"-moz-initial\" | \"baseline\" | \"center\" | \"end\" | \"flex-end\" | \"flex-start\" | \"inherit\" | \"initial\" | \"normal\" | \"revert\" | \"revert-layer\" | \"self-end\" | \"self-start\" | \"start\" | \"stretch\" | \"unset\" | string & {}",
+                    "references": {
+                        "React": {
+                            "location": "global",
+                            "id": "global::React"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "align",
+                "reflect": false,
+                "defaultValue": "'center'"
+            },
+            "justify": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "React.CSSProperties['justifyContent']",
+                    "resolved": "\"-moz-initial\" | \"center\" | \"end\" | \"flex-end\" | \"flex-start\" | \"inherit\" | \"initial\" | \"left\" | \"normal\" | \"revert\" | \"revert-layer\" | \"right\" | \"space-around\" | \"space-between\" | \"space-evenly\" | \"start\" | \"stretch\" | \"unset\" | string & {}",
+                    "references": {
+                        "React": {
+                            "location": "global",
+                            "id": "global::React"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "justify",
+                "reflect": false,
+                "defaultValue": "'center'"
+            },
+            "gap": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "React.CSSProperties['gap']",
+                    "resolved": "number | string | string & {}",
+                    "references": {
+                        "React": {
+                            "location": "global",
+                            "id": "global::React"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "gap",
+                "reflect": false,
+                "defaultValue": "'8px'"
+            },
             "offset": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/cpsl-col/cpsl-col.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cpsl-col.js","sourceRoot":"","sources":["../../../../src/components/cpsl-col/cpsl-col.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Listen, Prop, forceUpdate, h } from '@stencil/core';\nimport { matchBreakpoint } from '../../utils/media.js';\n\nconst win = typeof (window as any) !== 'undefined' ? (window as any) : undefined;\nconst SUPPORTS_VARS = win && !!(win.CSS && win.CSS.supports && win.CSS.supports('--a: 0'));\nconst BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];\n\n@Component({\n tag: 'cpsl-col',\n styleUrl: 'cpsl-col.scss',\n shadow: true,\n})\nexport class CpslCol {\n /*\n The amount to offset the column, in terms of how many columns it should shift to the end\n * of the total available.\n /\n @Prop() offset?: string;\n\n /\n The amount to offset the column for xs screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() offsetXs?: string;\n\n /\n The amount to offset the column for sm screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() offsetSm?: string;\n\n /\n The amount to offset the column for md screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() offsetMd?: string;\n\n /\n The amount to offset the column for lg screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() offsetLg?: string;\n\n /\n The amount to offset the column for xl screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() offsetXl?: string;\n\n /\n The amount to pull the column, in terms of how many columns it should shift to the start of\n * the total available.\n /\n @Prop() pull?: string;\n\n /\n The amount to pull the column for xs screens, in terms of how many columns it should shift\n * to the start of the total available.\n /\n @Prop() pullXs?: string;\n /\n The amount to pull the column for sm screens, in terms of how many columns it should shift\n * to the start of the total available.\n /\n @Prop() pullSm?: string;\n /\n The amount to pull the column for md screens, in terms of how many columns it should shift\n * to the start of the total available.\n /\n @Prop() pullMd?: string;\n /\n The amount to pull the column for lg screens, in terms of how many columns it should shift\n * to the start of the total available.\n /\n @Prop() pullLg?: string;\n /\n The amount to pull the column for xl screens, in terms of how many columns it should shift\n * to the start of the total available.\n /\n @Prop() pullXl?: string;\n\n /\n The amount to push the column, in terms of how many columns it should shift to the end\n * of the total available.\n /\n @Prop() push?: string;\n\n /\n The amount to push the column for xs screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() pushXs?: string;\n\n /\n The amount to push the column for sm screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() pushSm?: string;\n\n /\n The amount to push the column for md screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() pushMd?: string;\n\n /\n The amount to push the column for lg screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() pushLg?: string;\n\n /\n The amount to push the column for xl screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() pushXl?: string;\n\n /\n The size of the column, in terms of how many columns it should take up out of the total\n * available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() size?: string;\n\n /\n The size of the column for xs screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() sizeXs?: string;\n\n /\n The size of the column for sm screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() sizeSm?: string;\n\n /\n The size of the column for md screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() sizeMd?: string;\n\n /\n The size of the column for lg screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() sizeLg?: string;\n\n /\n The size of the column for xl screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() sizeXl?: string;\n\n @Listen('resize', { target: 'window' })\n onResize() {\n forceUpdate(this);\n }\n\n // Loop through all of the breakpoints to see if the media query\n // matches and grab the column value from the relevant prop if so\n private getColumns(property: string) {\n let matched;\n\n for (const breakpoint of BREAKPOINTS) {\n const matches = matchBreakpoint(breakpoint);\n\n // Grab the value of the property, if it exists and our\n // media query matches we return the value\n const columns = (this as any)[property + breakpoint.charAt(0).toUpperCase() + breakpoint.slice(1)];\n\n if (matches && columns !== undefined) {\n matched = columns;\n }\n }\n\n // Return the last matched columns since the breakpoints\n // increase in size and we want to return the largest match\n return matched;\n }\n\n private calculateSize() {\n const columns = this.getColumns('size');\n\n // If size wasn't set for any breakpoint\n // or if the user set the size without a value\n // it means we need to stick with the default and return\n // e.g. <ion-col size-md>\n if (!columns \|\| columns === '') {\n return;\n }\n\n // If the size is set to auto then don't calculate a size\n const colSize =\n columns === 'auto'\n ? 'auto'\n : // If CSS supports variables we should use the grid columns var\n SUPPORTS_VARS\n ? `calc(calc(${columns} / var(--ion-grid-columns, 12)) 100%)`\n : // Convert the columns to a percentage by dividing by the total number\n // of columns (12) and then multiplying by 100\n (columns / 12) * 100 + '%';\n\n return {\n 'flex': `0 0 ${colSize}`,\n 'width': `${colSize}`,\n 'max-width': `${colSize}`,\n };\n }\n\n // Called by push, pull, and offset since they use the same calculations\n private calculatePosition(property: string, modifier: string) {\n const columns = this.getColumns(property);\n\n if (!columns) {\n return;\n }\n\n // If the number of columns passed are greater than 0 and less than\n // 12 we can position the column, else default to auto\n const amount = SUPPORTS_VARS\n ? // If CSS supports variables we should use the grid columns var\n `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`\n : // Convert the columns to a percentage by dividing by the total number\n // of columns (12) and then multiplying by 100\n columns > 0 && columns < 12\n ? (columns / 12) * 100 + '%'\n : 'auto';\n\n return {\n [modifier]: amount,\n };\n }\n\n private calculateOffset(isRTL: boolean) {\n return this.calculatePosition('offset', isRTL ? 'margin-right' : 'margin-left');\n }\n\n private calculatePull(isRTL: boolean) {\n return this.calculatePosition('pull', isRTL ? 'left' : 'right');\n }\n\n private calculatePush(isRTL: boolean) {\n return this.calculatePosition('push', isRTL ? 'right' : 'left');\n }\n\n render() {\n const isRTL = document.dir === 'rtl';\n return (\n <Host\n style={{\n ...this.calculateOffset(isRTL),\n ...this.calculatePull(isRTL),\n ...this.calculatePush(isRTL),\n ...this.calculateSize(),\n }}\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"cpsl-col.js","sourceRoot":"","sources":["../../../../src/components/cpsl-col/cpsl-col.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Listen, Prop, forceUpdate, h } from '@stencil/core';\nimport { matchBreakpoint } from '../../utils/media.js';\n\nconst win = typeof (window as any) !== 'undefined' ? (window as any) : undefined;\nconst SUPPORTS_VARS = win && !!(win.CSS && win.CSS.supports && win.CSS.supports('--a: 0'));\nconst BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];\n\n@Component({\n tag: 'cpsl-col',\n styleUrl: 'cpsl-col.scss',\n shadow: true,\n})\nexport class CpslCol {\n @Prop() align?: React.CSSProperties['alignItems'] = 'center';\n\n @Prop() justify?: React.CSSProperties['justifyContent'] = 'center';\n\n @Prop() gap?: React.CSSProperties['gap'] = '8px';\n\n /*\n The amount to offset the column, in terms of how many columns it should shift to the end\n * of the total available.\n /\n @Prop() offset?: string;\n\n /\n The amount to offset the column for xs screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() offsetXs?: string;\n\n /\n The amount to offset the column for sm screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() offsetSm?: string;\n\n /\n The amount to offset the column for md screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() offsetMd?: string;\n\n /\n The amount to offset the column for lg screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() offsetLg?: string;\n\n /\n The amount to offset the column for xl screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() offsetXl?: string;\n\n /\n The amount to pull the column, in terms of how many columns it should shift to the start of\n * the total available.\n /\n @Prop() pull?: string;\n\n /\n The amount to pull the column for xs screens, in terms of how many columns it should shift\n * to the start of the total available.\n /\n @Prop() pullXs?: string;\n /\n The amount to pull the column for sm screens, in terms of how many columns it should shift\n * to the start of the total available.\n /\n @Prop() pullSm?: string;\n /\n The amount to pull the column for md screens, in terms of how many columns it should shift\n * to the start of the total available.\n /\n @Prop() pullMd?: string;\n /\n The amount to pull the column for lg screens, in terms of how many columns it should shift\n * to the start of the total available.\n /\n @Prop() pullLg?: string;\n /\n The amount to pull the column for xl screens, in terms of how many columns it should shift\n * to the start of the total available.\n /\n @Prop() pullXl?: string;\n\n /\n The amount to push the column, in terms of how many columns it should shift to the end\n * of the total available.\n /\n @Prop() push?: string;\n\n /\n The amount to push the column for xs screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() pushXs?: string;\n\n /\n The amount to push the column for sm screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() pushSm?: string;\n\n /\n The amount to push the column for md screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() pushMd?: string;\n\n /\n The amount to push the column for lg screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() pushLg?: string;\n\n /\n The amount to push the column for xl screens, in terms of how many columns it should shift\n * to the end of the total available.\n /\n @Prop() pushXl?: string;\n\n /\n The size of the column, in terms of how many columns it should take up out of the total\n * available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() size?: string;\n\n /\n The size of the column for xs screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() sizeXs?: string;\n\n /\n The size of the column for sm screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() sizeSm?: string;\n\n /\n The size of the column for md screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() sizeMd?: string;\n\n /\n The size of the column for lg screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() sizeLg?: string;\n\n /\n The size of the column for xl screens, in terms of how many columns it should take up out\n * of the total available. If `\"auto\"` is passed, the column will be the size of its content.\n /\n @Prop() sizeXl?: string;\n\n @Listen('resize', { target: 'window' })\n onResize() {\n forceUpdate(this);\n }\n\n // Loop through all of the breakpoints to see if the media query\n // matches and grab the column value from the relevant prop if so\n private getColumns(property: string) {\n let matched;\n\n for (const breakpoint of BREAKPOINTS) {\n const matches = matchBreakpoint(breakpoint);\n\n // Grab the value of the property, if it exists and our\n // media query matches we return the value\n const columns = (this as any)[property + breakpoint.charAt(0).toUpperCase() + breakpoint.slice(1)];\n\n if (matches && columns !== undefined) {\n matched = columns;\n }\n }\n\n // Return the last matched columns since the breakpoints\n // increase in size and we want to return the largest match\n return matched;\n }\n\n private calculateSize() {\n const columns = this.getColumns('size');\n\n // If size wasn't set for any breakpoint\n // or if the user set the size without a value\n // it means we need to stick with the default and return\n // e.g. <ion-col size-md>\n if (!columns \|\| columns === '') {\n return;\n }\n\n // If the size is set to auto then don't calculate a size\n const colSize =\n columns === 'auto'\n ? 'auto'\n : // If CSS supports variables we should use the grid columns var\n SUPPORTS_VARS\n ? `calc(calc(${columns} / var(--ion-grid-columns, 12)) 100%)`\n : // Convert the columns to a percentage by dividing by the total number\n // of columns (12) and then multiplying by 100\n (columns / 12) * 100 + '%';\n\n return {\n 'flex': `0 0 ${colSize}`,\n 'width': `${colSize}`,\n 'max-width': `${colSize}`,\n };\n }\n\n // Called by push, pull, and offset since they use the same calculations\n private calculatePosition(property: string, modifier: string) {\n const columns = this.getColumns(property);\n\n if (!columns) {\n return;\n }\n\n // If the number of columns passed are greater than 0 and less than\n // 12 we can position the column, else default to auto\n const amount = SUPPORTS_VARS\n ? // If CSS supports variables we should use the grid columns var\n `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`\n : // Convert the columns to a percentage by dividing by the total number\n // of columns (12) and then multiplying by 100\n columns > 0 && columns < 12\n ? (columns / 12) * 100 + '%'\n : 'auto';\n\n return {\n [modifier]: amount,\n };\n }\n\n private calculateOffset(isRTL: boolean) {\n return this.calculatePosition('offset', isRTL ? 'margin-right' : 'margin-left');\n }\n\n private calculatePull(isRTL: boolean) {\n return this.calculatePosition('pull', isRTL ? 'left' : 'right');\n }\n\n private calculatePush(isRTL: boolean) {\n return this.calculatePosition('push', isRTL ? 'right' : 'left');\n }\n\n render() {\n const isRTL = document.dir === 'rtl';\n return (\n <Host\n style={{\n ...this.calculateOffset(isRTL),\n ...this.calculatePull(isRTL),\n ...this.calculatePush(isRTL),\n ...this.calculateSize(),\n }}\n >\n <slot></slot>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/cpsl-icon/cpsl-icon.css CHANGED Viewed

@@ -55,8 +55,11 @@
    */
 :host {
   display: block;
+  --filter: auto;
   --height: 24px;
   --width: 24px;
+  --svg-height: calc(var(--height) - (2 * var(--inset)));
+  --svg-width: calc(var(--width) - (2 * var(--inset)));
   --icon-color: currentColor;
   --icon-fill-color: currentColor;
   --icon-stroke-color: currentColor;
@@ -74,14 +77,17 @@
 :host div {
   display: flex;
+  justify-content: center;
+  align-items: center;
   width: 100%;
   height: 100%;
   color: var(--icon-color);
 }
 :host svg {
-  width: 100%;
-  height: 100%;
+  width: var(--svg-width, "100%");
+  height: var(--svg-height, "100%");
+  filter: var(--filter);
 }
 :host svg .background-16 {
   fill: var(--cpsl-color-background-16);

package/dist/collection/components/cpsl-icon/cpsl-icon.js CHANGED Viewed

@@ -4,10 +4,12 @@ export class CpslIcon {
     constructor() {
         this.src = undefined;
         this.size = undefined;
+        this.invert = undefined;
+        this.inset = '0px';
         this.icon = undefined;
     }
     render() {
-        return (h(Host, { key: '3eeac68688cf0a4acf173be909a7f36b4285f97d', part: "icon", role: "img", style: this.size ? { width: this.size, height: this.size } : {} }, !this.icon ? h("img", { src: this.src }) : h("div", { innerHTML: Icons[this.icon] })));
+        return (h(Host, { key: '42f171468ddb966ecdf81dc4e6bac3004f5f0761', part: "icon", role: "img", style: Object.assign(Object.assign({ ['--inset']: this.inset }, (this.size ? { ['--height']: this.size, ['--width']: this.size } : {})), (this.invert ? { ['--filter']: 'invert(100%)' } : {})) }, !this.icon ? h("img", { src: this.src }) : h("div", { innerHTML: Icons[this.icon] })));
     }
     static get is() { return "cpsl-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -57,6 +59,41 @@ export class CpslIcon {
                 "attribute": "size",
                 "reflect": false
             },
+            "invert": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to invert the icon's colors."
+                },
+                "attribute": "invert",
+                "reflect": false
+            },
+            "inset": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The CSS length to inset the icon."
+                },
+                "attribute": "inset",
+                "reflect": false,
+                "defaultValue": "'0px'"
+            },
             "icon": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/cpsl-icon/cpsl-icon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cpsl-icon.js","sourceRoot":"","sources":["../../../../src/components/cpsl-icon/cpsl-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAOpD,MAAM,OAAO,QAAQ~~;;;;;;IAgBnB~~,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,~~qDAAC~~,IAAI,EAAC,MAAM,~~EAAC~~,IAAI,EAAC,KAAK,~~EAAC~~,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,~~KAAK~~,EAAE,IAAI,CAAC,IAAI,EAAE,~~MAAM~~,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,~~IACzF~~,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,WAAK,GAAG,EAAE,IAAI,CAAC,GAAG,GAAI,CAAC,CAAC,CAAC,WAAK,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAI,CACtE,CACR,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\nimport { IconType } from '../../interface.js';\nimport { Icons } from '../../assets/icons/index.js';\n\n@Component({\n tag: 'cpsl-icon',\n styleUrl: 'cpsl-icon.scss',\n shadow: true,\n})\nexport class CpslIcon {\n /*\n The external source of the icon. If both `icon` and `src` are provided, `icon` will be used.\n /\n @Prop() src?: string;\n\n /\n The CSS size of the icon.\n /\n @Prop() size?: string;\n\n /\n The name of the icon. If both `icon` and `src` are provided, `icon` will be used.\n */\n @Prop() icon?: IconType;\n\n render() {\n return (\n <Host part=\"icon\" role=\"img\" style={this.size ? { ~~width~~: this.size, ~~height~~: this.size } : {}}>\n {!this.icon ? <img src={this.src} /> : <div innerHTML={Icons[this.icon]} />}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"cpsl-icon.js","sourceRoot":"","sources":["../../../../src/components/cpsl-icon/cpsl-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAOpD,MAAM,OAAO,QAAQ;;;;;qBAmBK,KAAK;;;IAO7B,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,KAAK,EACV,KAAK,gCAAI,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,KAAK,IAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,UAAU,CAAC,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,UAAU,CAAC,EAAE,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAEpK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,WAAK,GAAG,EAAE,IAAI,CAAC,GAAG,GAAI,CAAC,CAAC,CAAC,WAAK,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAI,CACtE,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\nimport { IconType } from '../../interface.js';\nimport { Icons } from '../../assets/icons/index.js';\n\n@Component({\n tag: 'cpsl-icon',\n styleUrl: 'cpsl-icon.scss',\n shadow: true,\n})\nexport class CpslIcon {\n /*\n The external source of the icon. If both `icon` and `src` are provided, `icon` will be used.\n /\n @Prop() src?: string;\n\n /\n The CSS size of the icon.\n /\n @Prop() size?: string;\n\n /\n Whether to invert the icon's colors.\n /\n @Prop() invert?: boolean;\n\n /\n The CSS length to inset the icon.\n /\n @Prop() inset: string = '0px';\n\n /\n The name of the icon. If both `icon` and `src` are provided, `icon` will be used.\n */\n @Prop() icon?: IconType;\n\n render() {\n return (\n <Host\n part=\"icon\"\n role=\"img\"\n style={{ ['--inset']: this.inset, ...(this.size ? { ['--height']: this.size, ['--width']: this.size } : {}), ...(this.invert ? { ['--filter']: 'invert(100%)' } : {}) }}\n >\n {!this.icon ? <img src={this.src} /> : <div innerHTML={Icons[this.icon]} />}\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/cpsl-input/cpsl-input.css CHANGED Viewed

@@ -126,7 +126,7 @@
   box-sizing: border-box;
   height: var(--container-height);
   gap: var(--container-gap);
-  border-style: solid;
+  border-style: var(--container-border-style, solid);
   border-width: var(--container-border-width);
   border-color: var(--container-border-color);
   border-radius: var(--container-border-radius);
@@ -152,6 +152,8 @@
   font-weight: var(--input-font-weight);
   color: var(--input-color);
   background: var(--input-background-color);
+  width: var(--input-width, auto);
+  text-align: var(--input-text-align, left);
   resize: none;
   font-family: var(--cpsl-font-family, inherit);
 }

package/dist/collection/components/cpsl-input/cpsl-input.js CHANGED Viewed

@@ -71,6 +71,7 @@ export class CpslInput {
         this.contrastText = false;
         this.enterkeyhint = undefined;
         this.errorText = undefined;
+        this.fitContent = false;
         this.mask = undefined;
         this.isPhone = undefined;
         this.helperText = undefined;
@@ -193,8 +194,8 @@ export class CpslInput {
         return this.el.querySelector('[slot="end"]');
     }
     render() {
-        var _a, _b;
-        return (h(Host, { key: 'fba918642761d2d430ce71d0ffb18c103b7cbd46', class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.focusedValue) || Boolean(this.value), 'contrast-text': this.contrastText } }, this.label && (h("label", { key: '91ce78dd87eeccbea2769d2fe43a3724fcaa6d3f', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("div", { key: '49abe74e0003f2ad3def70d11bc3e812edf4488b', class: { 'input-container': true, 'error-container': Boolean(this.errorText), 'textarea': this.as === 'textarea' } }, h("slot", { key: '5191799e84eb5a7a62cf966060dae77a9d37d270', name: "start" }), h(this.as, { key: '09a4a3be9bcc9608127634587b4ff86da3304a55', part: "native-input", class: { 'native-input': true }, ref: input => (this.nativeInput = input), id: this.inputId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, type: this.type, value: (_a = this.value) !== null && _a !== void 0 ? _a : '', rows: this.rows, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.focusInput, onPaste: this.onPaste }), h("slot", { key: 'b53e9fc972d166a5a3c7795f10cb5ebc9104a3be', name: "end" })), (this.errorText || this.helperText) && (h("div", { key: 'f04d756ef4bd27c4ca9154df5b02806e42b33046', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: 'f68e00473cd424ea0654fea61262295b55761d31' }, (_b = this.errorText) !== null && _b !== void 0 ? _b : this.helperText)))));
+        var _a, _b, _c, _d;
+        return (h(Host, { key: '9b5abde0435d0acbb4f453e3c7b4c7d1da89a165', class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.focusedValue) || Boolean(this.value), 'contrast-text': this.contrastText } }, this.label && (h("label", { key: '1ef8472e4ab2a114a3ac961ed5fbcafe82041631', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("div", { key: '8945dd09731255aab8acb91f4e12f5285ec86930', class: { 'input-container': true, 'error-container': Boolean(this.errorText), 'textarea': this.as === 'textarea' } }, h("slot", { key: '2f36a7cb8086269c51a4924dc671245a31eddb4f', name: "start" }), h(this.as, { key: '9e244a91bc8909db5fcf54fd10ccf221df8846c2', part: "native-input", class: { 'native-input': true }, ref: input => (this.nativeInput = input), id: this.inputId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, size: this.fitContent ? ((_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 1) : undefined, spellcheck: this.spellcheck, type: this.type, value: (_c = this.value) !== null && _c !== void 0 ? _c : '', rows: this.rows, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.focusInput, onPaste: this.onPaste }), h("slot", { key: '3f3f289699ca56a6c9d0b5e01e702c6a301697dc', name: "end" })), (this.errorText || this.helperText) && (h("div", { key: 'f413751aca4b5059a6b3e6151182b19b09a85d89', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: '5189ac80ac4356f267412a93564b077888a206cf' }, (_d = this.errorText) !== null && _d !== void 0 ? _d : this.helperText)))));
     }
     static get is() { return "cpsl-input"; }
     static get encapsulation() { return "shadow"; }
@@ -411,6 +412,24 @@ export class CpslInput {
                 "attribute": "error-text",
                 "reflect": false
             },
+            "fitContent": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Update the native input size to match the text content"
+                },
+                "attribute": "fit-content",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "mask": {
                 "type": "string",
                 "mutable": false,