@getpara/core-components 2.0.0-alpha.41 → 2.0.0-alpha.43
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.
- package/dist/capsule/capsule.esm.js +1 -1
- package/dist/capsule/{p-2e6c48e1.entry.js → p-75cbc8ab.entry.js} +3 -3
- package/dist/capsule/p-75cbc8ab.entry.js.map +1 -0
- package/dist/cjs/cpsl-alert_34.cjs.entry.js +9 -4
- package/dist/cjs/cpsl-alert_34.cjs.entry.js.map +1 -1
- package/dist/collection/components/cpsl-icon/cpsl-icon.css +3 -3
- package/dist/collection/components/cpsl-icon/cpsl-icon.js +1 -1
- package/dist/collection/components/cpsl-icon/cpsl-icon.js.map +1 -1
- package/dist/collection/components/cpsl-select-item/cpsl-select-item.js +7 -2
- package/dist/collection/components/cpsl-select-item/cpsl-select-item.js.map +1 -1
- package/dist/esm/cpsl-alert_34.entry.js +9 -4
- package/dist/esm/cpsl-alert_34.entry.js.map +1 -1
- package/package.json +2 -2
- package/dist/capsule/p-2e6c48e1.entry.js.map +0 -1
|
@@ -82,9 +82,9 @@
|
|
|
82
82
|
align-items: center;
|
|
83
83
|
width: 100%;
|
|
84
84
|
height: 100%;
|
|
85
|
-
border: var(--border, auto);
|
|
86
|
-
border-radius: var(--border-radius, 0);
|
|
87
|
-
background: var(--background, transparent);
|
|
85
|
+
border: var(--icon-border, auto);
|
|
86
|
+
border-radius: var(--icon-border-radius, 0);
|
|
87
|
+
background: var(--icon-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: '
|
|
16
|
+
return (h(Host, { key: 'fda593bf99b0dedbd76080936d3c6ca40d4a3f39', 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' ? { ['--icon-border-radius']: '1000px' } : {})), (this.radius === 'theme' ? { ['--icon-border-radius']: 'var(--cpsl-border-radius-tile-button)' } : {})), (this.background ? { ['--icon-background']: this.background } : {})), (this.border ? { ['--icon-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,
|
|
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,sBAAsB,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GACtE,CAAC,IAAI,CAAC,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,sBAAsB,CAAC,EAAE,uCAAuC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GACtG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,mBAAmB,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GACnE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,eAAe,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GACvD,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' ? { ['--icon-border-radius']: '1000px' } : {}),\n ...(this.radius === 'theme' ? { ['--icon-border-radius']: 'var(--cpsl-border-radius-tile-button)' } : {}),\n ...(this.background ? { ['--icon-background']: this.background } : {}),\n ...(this.border ? { ['--icon-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"]}
|
|
@@ -8,10 +8,15 @@ export class CpslSelectItem {
|
|
|
8
8
|
this.value = undefined;
|
|
9
9
|
}
|
|
10
10
|
render() {
|
|
11
|
-
return (h(Host, { key: '532ed86577783bc61c40a18de178e63d16cf24c1' }, h("div", { key: '
|
|
11
|
+
return (h(Host, { key: '532ed86577783bc61c40a18de178e63d16cf24c1' }, h("div", { key: 'b8204d608be86196abdb6aa9f87f945a81ed94aa', part: "outer-container", class: "outer-container", onClick: e => {
|
|
12
|
+
var _a;
|
|
13
|
+
const targetId = (_a = e.target.id) !== null && _a !== void 0 ? _a : '';
|
|
14
|
+
if (targetId === 'ignore-click') {
|
|
15
|
+
return;
|
|
16
|
+
}
|
|
12
17
|
this.handleItemClick();
|
|
13
18
|
e.stopPropagation();
|
|
14
|
-
} }, h("div", { key: '
|
|
19
|
+
} }, h("div", { key: '39f0db01095055ae5a759d26f35abd862e188f4c', part: "inner-container", class: { 'inner-container': true, 'selected': this.selected } }, h("slot", { key: '2c813c62143a9003c6f45bc979986e375b15f6fe' })))));
|
|
15
20
|
}
|
|
16
21
|
static get is() { return "cpsl-select-item"; }
|
|
17
22
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cpsl-select-item.js","sourceRoot":"","sources":["../../../../src/components/cpsl-select-item/cpsl-select-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAgB,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,cAAc;;QAiBjB,oBAAe,GAAG,GAAG,EAAE;YAC7B,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC5C,CAAC,CAAC;;;;IAEF,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DACE,IAAI,EAAC,iBAAiB,EACtB,KAAK,EAAC,iBAAiB,EACvB,OAAO,EAAE,CAAC,CAAC,EAAE
|
|
1
|
+
{"version":3,"file":"cpsl-select-item.js","sourceRoot":"","sources":["../../../../src/components/cpsl-select-item/cpsl-select-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAgB,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,cAAc;;QAiBjB,oBAAe,GAAG,GAAG,EAAE;YAC7B,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC5C,CAAC,CAAC;;;;IAEF,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DACE,IAAI,EAAC,iBAAiB,EACtB,KAAK,EAAC,iBAAiB,EACvB,OAAO,EAAE,CAAC,CAAC,EAAE;;oBACX,MAAM,QAAQ,GAAG,MAAC,CAAC,CAAC,MAAc,CAAC,EAAE,mCAAI,EAAE,CAAC;oBAE5C,IAAI,QAAQ,KAAK,cAAc,EAAE,CAAC;wBAChC,OAAO;oBACT,CAAC;oBAED,IAAI,CAAC,eAAe,EAAE,CAAC;oBACvB,CAAC,CAAC,eAAe,EAAE,CAAC;gBACtB,CAAC;gBAED,4DAAK,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAE,EAAE,iBAAiB,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,QAAQ,EAAE;oBACvF,8DAAa,CACT,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, Event, h, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'cpsl-select-item',\n styleUrl: 'cpsl-select-item.scss',\n shadow: true,\n})\nexport class CpslSelectItem {\n /**\n * Whether the item is selected or not.\n */\n @Prop() selected?: boolean;\n\n /**\n * Value of the item.\n */\n @Prop() value: string;\n\n /**\n * Called when item is clicked.\n * @internal\n */\n @Event() cpslSelectItemClick: EventEmitter<string>;\n\n private handleItemClick = () => {\n this.cpslSelectItemClick.emit(this.value);\n };\n\n render() {\n return (\n <Host>\n <div\n part=\"outer-container\"\n class=\"outer-container\"\n onClick={e => {\n const targetId = (e.target as any).id ?? '';\n\n if (targetId === 'ignore-click') {\n return;\n }\n\n this.handleItemClick();\n e.stopPropagation();\n }}\n >\n <div part=\"inner-container\" class={{ 'inner-container': true, 'selected': this.selected }}>\n <slot></slot>\n </div>\n </div>\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)}: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}";
|
|
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(--icon-border, auto);border-radius:var(--icon-border-radius, 0);background:var(--icon-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: '
|
|
13146
|
+
return (h(Host, { key: 'fda593bf99b0dedbd76080936d3c6ca40d4a3f39', 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' ? { ['--icon-border-radius']: '1000px' } : {})), (this.radius === 'theme' ? { ['--icon-border-radius']: 'var(--cpsl-border-radius-tile-button)' } : {})), (this.background ? { ['--icon-background']: this.background } : {})), (this.border ? { ['--icon-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;
|
|
@@ -21921,10 +21921,15 @@ const CpslSelectItem = class {
|
|
|
21921
21921
|
this.value = undefined;
|
|
21922
21922
|
}
|
|
21923
21923
|
render() {
|
|
21924
|
-
return (h(Host, { key: '532ed86577783bc61c40a18de178e63d16cf24c1' }, h("div", { key: '
|
|
21924
|
+
return (h(Host, { key: '532ed86577783bc61c40a18de178e63d16cf24c1' }, h("div", { key: 'b8204d608be86196abdb6aa9f87f945a81ed94aa', part: "outer-container", class: "outer-container", onClick: e => {
|
|
21925
|
+
var _a;
|
|
21926
|
+
const targetId = (_a = e.target.id) !== null && _a !== void 0 ? _a : '';
|
|
21927
|
+
if (targetId === 'ignore-click') {
|
|
21928
|
+
return;
|
|
21929
|
+
}
|
|
21925
21930
|
this.handleItemClick();
|
|
21926
21931
|
e.stopPropagation();
|
|
21927
|
-
} }, h("div", { key: '
|
|
21932
|
+
} }, h("div", { key: '39f0db01095055ae5a759d26f35abd862e188f4c', part: "inner-container", class: { 'inner-container': true, 'selected': this.selected } }, h("slot", { key: '2c813c62143a9003c6f45bc979986e375b15f6fe' })))));
|
|
21928
21933
|
}
|
|
21929
21934
|
};
|
|
21930
21935
|
CpslSelectItem.style = CpslSelectItemStyle0;
|