@getpara/core-components 2.0.0-alpha.40 → 2.0.0-alpha.41

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.
@@ -66,9 +66,6 @@
66
66
  --icon-stroke-color: var(--icon-stroke-color, var(--icon-color, currentColor));
67
67
  width: var(--width);
68
68
  height: var(--height);
69
- border-radius: var(--border-radius, 0);
70
- border: var(--border, auto);
71
- background: var(--background, transparent);
72
69
  }
73
70
  :host .foreground-0 {
74
71
  fill: var(--cpsl-color-foreground-0);
@@ -85,6 +82,9 @@
85
82
  align-items: center;
86
83
  width: 100%;
87
84
  height: 100%;
85
+ border: var(--border, auto);
86
+ border-radius: var(--border-radius, 0);
87
+ background: var(--background, transparent);
88
88
  color: var(--icon-color);
89
89
  }
90
90
 
@@ -13,7 +13,7 @@ export class CpslIcon {
13
13
  this.border = undefined;
14
14
  }
15
15
  render() {
16
- return (h(Host, { key: 'f2cddb1787ae9fe61190ce0444bd8f2765c9982b', part: "icon", role: "img", style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (this.inset ? { ['--inset']: this.inset } : {})), (this.size ? { ['--height']: this.size, ['--width']: this.size } : {})), (this.invert ? { ['--filter']: 'invert(100%)' } : {})), (this.radius === 'full' ? { ['--border-radius']: '1000px' } : {})), (this.radius === 'theme' ? { ['--border-radius']: 'var(--cpsl-border-radius-tile-button)' } : {})), (this.background ? { ['--background']: this.background } : {})), (this.border ? { ['--border']: this.border } : {})), (this.color ? { ['--icon-color']: this.color } : {})) }, this.icon ? (h("div", { innerHTML: Icons[this.icon] })) : (h("div", null, h("img", { src: this.src })))));
16
+ return (h(Host, { key: 'f2cddb1787ae9fe61190ce0444bd8f2765c9982b', part: "icon", role: "img", style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (this.inset ? { ['--inset']: this.inset } : {})), (this.size ? { ['--height']: this.size, ['--width']: this.size } : {})), (this.invert ? { ['--filter']: 'invert(100%)' } : {})), (this.radius === 'full' ? { ['--border-radius']: '1000px' } : {})), (this.radius === 'theme' ? { ['--border-radius']: 'var(--cpsl-border-radius-tile-button)' } : {})), (this.background ? { ['--background']: this.background } : {})), (this.border ? { ['--border']: this.border } : {})), (this.color ? { ['--icon-color']: this.color } : {})) }, this.src ? (h("div", null, h("img", { src: this.src }))) : (h("div", { innerHTML: Icons[this.icon] }))));
17
17
  }
18
18
  static get is() { return "cpsl-icon"; }
19
19
  static get encapsulation() { return "shadow"; }
@@ -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;;;;;qBAmBK,KAAK;;sBAUgB,MAAM;;;;;IAiBnD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,KAAK,EACV,KAAK,sHACA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAC/C,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,GACtE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,UAAU,CAAC,EAAE,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GACrD,CAAC,IAAI,CAAC,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,iBAAiB,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GACjE,CAAC,IAAI,CAAC,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,iBAAiB,CAAC,EAAE,uCAAuC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GACjG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,cAAc,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAC9D,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,UAAU,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAClD,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,cAAc,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAGxD,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,WAAK,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAI,CACrC,CAAC,CAAC,CAAC,CACF;YACE,WAAK,GAAG,EAAE,IAAI,CAAC,GAAG,GAAI,CAClB,CACP,CACI,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 /**\n * Whether the icon should be rounded.\n */\n @Prop() radius?: 'none' | 'theme' | 'full' = 'none';\n\n /**\n * The background CSS property of the icon.\n */\n @Prop() background?: string;\n\n /**\n * The color of the icon.\n */\n @Prop() color?: string;\n\n /**\n * The border CSS property of the icon.\n */\n @Prop() border?: string;\n\n render() {\n return (\n <Host\n part=\"icon\"\n role=\"img\"\n style={{\n ...(this.inset ? { ['--inset']: this.inset } : {}),\n ...(this.size ? { ['--height']: this.size, ['--width']: this.size } : {}),\n ...(this.invert ? { ['--filter']: 'invert(100%)' } : {}),\n ...(this.radius === 'full' ? { ['--border-radius']: '1000px' } : {}),\n ...(this.radius === 'theme' ? { ['--border-radius']: 'var(--cpsl-border-radius-tile-button)' } : {}),\n ...(this.background ? { ['--background']: this.background } : {}),\n ...(this.border ? { ['--border']: this.border } : {}),\n ...(this.color ? { ['--icon-color']: this.color } : {}),\n }}\n >\n {this.icon ? (\n <div innerHTML={Icons[this.icon]} />\n ) : (\n <div>\n <img src={this.src} />\n </div>\n )}\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;;sBAUgB,MAAM;;;;;IAiBnD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,KAAK,EACV,KAAK,sHACA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAC/C,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,GACtE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,UAAU,CAAC,EAAE,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GACrD,CAAC,IAAI,CAAC,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,iBAAiB,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GACjE,CAAC,IAAI,CAAC,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,iBAAiB,CAAC,EAAE,uCAAuC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GACjG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,cAAc,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAC9D,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,UAAU,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAClD,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,cAAc,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAGxD,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CACV;YACE,WAAK,GAAG,EAAE,IAAI,CAAC,GAAG,GAAI,CAClB,CACP,CAAC,CAAC,CAAC,CACF,WAAK,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAI,CACrC,CACI,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 /**\n * Whether the icon should be rounded.\n */\n @Prop() radius?: 'none' | 'theme' | 'full' = 'none';\n\n /**\n * The background CSS property of the icon.\n */\n @Prop() background?: string;\n\n /**\n * The color of the icon.\n */\n @Prop() color?: string;\n\n /**\n * The border CSS property of the icon.\n */\n @Prop() border?: string;\n\n render() {\n return (\n <Host\n part=\"icon\"\n role=\"img\"\n style={{\n ...(this.inset ? { ['--inset']: this.inset } : {}),\n ...(this.size ? { ['--height']: this.size, ['--width']: this.size } : {}),\n ...(this.invert ? { ['--filter']: 'invert(100%)' } : {}),\n ...(this.radius === 'full' ? { ['--border-radius']: '1000px' } : {}),\n ...(this.radius === 'theme' ? { ['--border-radius']: 'var(--cpsl-border-radius-tile-button)' } : {}),\n ...(this.background ? { ['--background']: this.background } : {}),\n ...(this.border ? { ['--border']: this.border } : {}),\n ...(this.color ? { ['--icon-color']: this.color } : {}),\n }}\n >\n {this.src ? (\n <div>\n <img src={this.src} />\n </div>\n ) : (\n <div innerHTML={Icons[this.icon]} />\n )}\n </Host>\n );\n }\n}\n"]}
@@ -13126,7 +13126,7 @@ const CpslFileUpload = class {
13126
13126
  let inputIds$2 = 0;
13127
13127
  CpslFileUpload.style = CpslFileUploadStyle0;
13128
13128
 
13129
- const cpslIconCss = ":host{display:block;--filter:auto;--height:24px;--width:24px;--inset:0px;--computed-height:calc(var(--height) - (2 * var(--inset)));--computed-width:calc(var(--width) - (2 * var(--inset)));--icon-color:var(--icon-color, currentColor);--icon-fill-color:var(--icon-fill-color, var(--icon-color, currentColor));--icon-stroke-color:var(--icon-stroke-color, var(--icon-color, currentColor));width:var(--width);height:var(--height);border-radius:var(--border-radius, 0);border:var(--border, auto);background:var(--background, transparent)}:host .foreground-0{fill:var(--cpsl-color-foreground-0);stop-color:var(--cpsl-color-foreground-0)}:host .accent-0{fill:var(--cpsl-color-accent-0, var(--cpsl-color-foreground-0));stop-color:var(--cpsl-color-accent-0, var(--cpsl-color-foreground-0))}:host div{display:flex;justify-content:center;align-items:center;width:100%;height:100%;color:var(--icon-color)}:host svg{width:var(--computed-width, \"100%\");height:var(--computed-height, \"100%\");filter:var(--filter)}:host svg .background-16{fill:var(--cpsl-color-background-16)}:host svg .foreground-0{fill:var(--cpsl-color-foreground-0)}:host svg .fill{fill:var(--icon-fill-color)}:host svg .stroke{stroke:var(--icon-stroke-color)}:host img{width:var(--computed-width, 100%);height:var(--computed-height, 100%);object-fit:contain}";
13129
+ const cpslIconCss = ":host{display:block;--filter:auto;--height:24px;--width:24px;--inset:0px;--computed-height:calc(var(--height) - (2 * var(--inset)));--computed-width:calc(var(--width) - (2 * var(--inset)));--icon-color:var(--icon-color, currentColor);--icon-fill-color:var(--icon-fill-color, var(--icon-color, currentColor));--icon-stroke-color:var(--icon-stroke-color, var(--icon-color, currentColor));width:var(--width);height:var(--height)}:host .foreground-0{fill:var(--cpsl-color-foreground-0);stop-color:var(--cpsl-color-foreground-0)}:host .accent-0{fill:var(--cpsl-color-accent-0, var(--cpsl-color-foreground-0));stop-color:var(--cpsl-color-accent-0, var(--cpsl-color-foreground-0))}:host div{display:flex;justify-content:center;align-items:center;width:100%;height:100%;border:var(--border, auto);border-radius:var(--border-radius, 0);background:var(--background, transparent);color:var(--icon-color)}:host svg{width:var(--computed-width, \"100%\");height:var(--computed-height, \"100%\");filter:var(--filter)}:host svg .background-16{fill:var(--cpsl-color-background-16)}:host svg .foreground-0{fill:var(--cpsl-color-foreground-0)}:host svg .fill{fill:var(--icon-fill-color)}:host svg .stroke{stroke:var(--icon-stroke-color)}:host img{width:var(--computed-width, 100%);height:var(--computed-height, 100%);object-fit:contain}";
13130
13130
  const CpslIconStyle0 = cpslIconCss;
13131
13131
 
13132
13132
  const CpslIcon = class {
@@ -13143,7 +13143,7 @@ const CpslIcon = class {
13143
13143
  this.border = undefined;
13144
13144
  }
13145
13145
  render() {
13146
- return (h(Host, { key: 'f2cddb1787ae9fe61190ce0444bd8f2765c9982b', part: "icon", role: "img", style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (this.inset ? { ['--inset']: this.inset } : {})), (this.size ? { ['--height']: this.size, ['--width']: this.size } : {})), (this.invert ? { ['--filter']: 'invert(100%)' } : {})), (this.radius === 'full' ? { ['--border-radius']: '1000px' } : {})), (this.radius === 'theme' ? { ['--border-radius']: 'var(--cpsl-border-radius-tile-button)' } : {})), (this.background ? { ['--background']: this.background } : {})), (this.border ? { ['--border']: this.border } : {})), (this.color ? { ['--icon-color']: this.color } : {})) }, this.icon ? (h("div", { innerHTML: Icons[this.icon] })) : (h("div", null, h("img", { src: this.src })))));
13146
+ return (h(Host, { key: 'f2cddb1787ae9fe61190ce0444bd8f2765c9982b', part: "icon", role: "img", style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (this.inset ? { ['--inset']: this.inset } : {})), (this.size ? { ['--height']: this.size, ['--width']: this.size } : {})), (this.invert ? { ['--filter']: 'invert(100%)' } : {})), (this.radius === 'full' ? { ['--border-radius']: '1000px' } : {})), (this.radius === 'theme' ? { ['--border-radius']: 'var(--cpsl-border-radius-tile-button)' } : {})), (this.background ? { ['--background']: this.background } : {})), (this.border ? { ['--border']: this.border } : {})), (this.color ? { ['--icon-color']: this.color } : {})) }, this.src ? (h("div", null, h("img", { src: this.src }))) : (h("div", { innerHTML: Icons[this.icon] }))));
13147
13147
  }
13148
13148
  };
13149
13149
  CpslIcon.style = CpslIconStyle0;