@paperless/core 2.0.1-beta.4 → 2.0.1-beta.6
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/CHANGELOG.md +32 -0
- package/dist/build/p-196e0f18.entry.js +2 -0
- package/dist/build/p-196e0f18.entry.js.map +1 -0
- package/dist/build/p-1c8c0b10.entry.js +2 -0
- package/dist/build/p-1c8c0b10.entry.js.map +1 -0
- package/dist/build/p-5ab354bf.entry.js +2 -0
- package/dist/build/p-5ab354bf.entry.js.map +1 -0
- package/dist/build/p-b3614ea9.entry.js +2 -0
- package/dist/build/p-b3614ea9.entry.js.map +1 -0
- package/dist/build/p-df72421b.entry.js +2 -0
- package/dist/build/p-df72421b.entry.js.map +1 -0
- package/dist/build/paperless.esm.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/p-avatar.cjs.entry.js +2 -2
- package/dist/cjs/p-avatar.cjs.entry.js.map +1 -1
- package/dist/cjs/p-button_3.cjs.entry.js +49 -13
- package/dist/cjs/p-button_3.cjs.entry.js.map +1 -1
- package/dist/cjs/p-dropdown_2.cjs.entry.js +5 -1
- package/dist/cjs/p-dropdown_2.cjs.entry.js.map +1 -1
- package/dist/cjs/p-navigation-item.cjs.entry.js +4 -2
- package/dist/cjs/p-navigation-item.cjs.entry.js.map +1 -1
- package/dist/cjs/p-profile.cjs.entry.js +6 -15
- package/dist/cjs/p-profile.cjs.entry.js.map +1 -1
- package/dist/cjs/paperless.cjs.js +1 -1
- package/dist/collection/components/atoms/avatar/avatar.component.css +1 -1
- package/dist/collection/components/atoms/avatar/avatar.component.js +1 -1
- package/dist/collection/components/atoms/avatar/avatar.component.js.map +1 -1
- package/dist/collection/components/atoms/icon/icon.component.js +2 -2
- package/dist/collection/components/atoms/icon/icon.component.js.map +1 -1
- package/dist/collection/components/molecules/button/button.component.css +1 -1
- package/dist/collection/components/molecules/button/button.component.js +67 -13
- package/dist/collection/components/molecules/button/button.component.js.map +1 -1
- package/dist/collection/components/molecules/dropdown/dropdown.component.js +5 -1
- package/dist/collection/components/molecules/dropdown/dropdown.component.js.map +1 -1
- package/dist/collection/components/molecules/navigation-item/navigation-item.component.js +4 -2
- package/dist/collection/components/molecules/navigation-item/navigation-item.component.js.map +1 -1
- package/dist/collection/components/molecules/profile/profile.component.css +1 -1
- package/dist/collection/components/molecules/profile/profile.component.js +5 -32
- package/dist/collection/components/molecules/profile/profile.component.js.map +1 -1
- package/dist/components/avatar.component.js +2 -2
- package/dist/components/avatar.component.js.map +1 -1
- package/dist/components/button.component.js +49 -12
- package/dist/components/button.component.js.map +1 -1
- package/dist/components/dropdown.component.js +5 -1
- package/dist/components/dropdown.component.js.map +1 -1
- package/dist/components/icon.component.js +1 -1
- package/dist/components/icon.component.js.map +1 -1
- package/dist/components/p-navigation-item.js +4 -2
- package/dist/components/p-navigation-item.js.map +1 -1
- package/dist/components/p-profile.js +24 -22
- package/dist/components/p-profile.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/p-avatar.entry.js +2 -2
- package/dist/esm/p-avatar.entry.js.map +1 -1
- package/dist/esm/p-button_3.entry.js +50 -14
- package/dist/esm/p-button_3.entry.js.map +1 -1
- package/dist/esm/p-dropdown_2.entry.js +5 -1
- package/dist/esm/p-dropdown_2.entry.js.map +1 -1
- package/dist/esm/p-navigation-item.entry.js +5 -3
- package/dist/esm/p-navigation-item.entry.js.map +1 -1
- package/dist/esm/p-profile.entry.js +6 -15
- package/dist/esm/p-profile.entry.js.map +1 -1
- package/dist/esm/paperless.js +1 -1
- package/dist/index.html +1 -1
- package/dist/paperless/p-196e0f18.entry.js +2 -0
- package/dist/paperless/p-196e0f18.entry.js.map +1 -0
- package/dist/paperless/p-1c8c0b10.entry.js +2 -0
- package/dist/paperless/p-1c8c0b10.entry.js.map +1 -0
- package/dist/paperless/p-5ab354bf.entry.js +2 -0
- package/dist/paperless/p-5ab354bf.entry.js.map +1 -0
- package/dist/paperless/p-b3614ea9.entry.js +2 -0
- package/dist/paperless/p-b3614ea9.entry.js.map +1 -0
- package/dist/paperless/p-df72421b.entry.js +2 -0
- package/dist/paperless/p-df72421b.entry.js.map +1 -0
- package/dist/paperless/paperless.esm.js +1 -1
- package/dist/sw.js +1 -1
- package/dist/sw.js.map +1 -1
- package/dist/types/components/molecules/button/button.component.d.ts +9 -1
- package/dist/types/components/molecules/navigation-item/navigation-item.component.d.ts +4 -0
- package/dist/types/components/molecules/profile/profile.component.d.ts +0 -5
- package/dist/types/components.d.ts +18 -24
- package/hydrate/index.js +68 -35
- package/package.json +1 -1
- package/dist/build/p-79cc09c0.entry.js +0 -2
- package/dist/build/p-79cc09c0.entry.js.map +0 -1
- package/dist/build/p-7d5f6497.entry.js +0 -2
- package/dist/build/p-7d5f6497.entry.js.map +0 -1
- package/dist/build/p-8912e3af.entry.js +0 -2
- package/dist/build/p-8912e3af.entry.js.map +0 -1
- package/dist/build/p-95eadadd.entry.js +0 -2
- package/dist/build/p-95eadadd.entry.js.map +0 -1
- package/dist/build/p-b5430fae.entry.js +0 -2
- package/dist/build/p-b5430fae.entry.js.map +0 -1
- package/dist/paperless/p-79cc09c0.entry.js +0 -2
- package/dist/paperless/p-79cc09c0.entry.js.map +0 -1
- package/dist/paperless/p-7d5f6497.entry.js +0 -2
- package/dist/paperless/p-7d5f6497.entry.js.map +0 -1
- package/dist/paperless/p-8912e3af.entry.js +0 -2
- package/dist/paperless/p-8912e3af.entry.js.map +0 -1
- package/dist/paperless/p-95eadadd.entry.js +0 -2
- package/dist/paperless/p-95eadadd.entry.js.map +0 -1
- package/dist/paperless/p-b5430fae.entry.js +0 -2
- package/dist/paperless/p-b5430fae.entry.js.map +0 -1
package/dist/collection/components/molecules/navigation-item/navigation-item.component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation-item.component.js","sourceRoot":"","sources":["../../../../src/components/molecules/navigation-item/navigation-item.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"navigation-item.component.js","sourceRoot":"","sources":["../../../../src/components/molecules/navigation-item/navigation-item.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAG/C,MAAM,cAAc,GAAG,GAAG,CACzB;EACC,iBAAiB;EACjB,yBAAyB;EACzB,+CAA+C;EAC/C,YAAY;EACZ,WAAW;EACX,qBAAqB;EACrB,gBAAgB;CAChB,EACD;EACC,QAAQ,EAAE;IACT,MAAM,EAAE;MACP,KAAK,EAAE,CAAC,oBAAoB,CAAC;MAC7B,IAAI,EAAE,CAAC,oDAAoD,CAAC;KAC5D;IACD,IAAI,EAAE;MACL,KAAK,EAAE,KAAK;MACZ,IAAI,EAAE,CAAC,MAAM,CAAC;KACd;GACD;CACD,CACD,CAAC;AAEF,MAAM,2BAA2B,GAAG,GAAG,CACtC,CAAC,mEAAmE,CAAC,EACrE;EACC,QAAQ,EAAE;IACT,MAAM,EAAE;MACP,KAAK,EAAE,KAAK;MACZ,IAAI,EAAE,CAAC,qBAAqB,CAAC;KAC7B;GACD;CACD,CACD,CAAC;AAOF,MAAM,OAAO,cAAc;;;kBASA,KAAK;cAKV,GAAG;;;;;EAsBxB,MAAM;IACL,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC;IAExB,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAEpE,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAC,gCAAgC;MAC3C,EAAC,OAAO,IACP,KAAK,EAAE,cAAc,CAAC;UACrB,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;UACjB,MAAM;SACN,CAAC,EACF,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM;QAEnB,WAAK,KAAK,EAAE,2BAA2B,CAAC,EAAE,MAAM,EAAE,CAAC;UAClD,cAAQ,OAAO,EAAE,IAAI,CAAC,IAAI,GAAI,CACzB;QAEN,YAAM,KAAK,EAAE,IAAI,CAAC,OAAO,IAAI,aAAa;UACzC,eAAQ,CACF;QAEN,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,GAAG,IAAI,CAC1C,mBAAU,IAAI,CAAC,OAAO,CAAW,CACjC,CACQ,CACJ,CACP,CAAC;EACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Host, Prop, Element } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { IconVariant } from '../../atoms/icon/icon.component';\n\nconst navigationItem = cva(\n\t[\n\t\t'h-8 w-[inherit]',\n\t\t'flex items-center gap-2',\n\t\t'text-black-teal-400 hover:text-black-teal-500',\n\t\t'rounded-lg',\n\t\t'py-1 px-2',\n\t\t'text-sm font-medium',\n\t\t'cursor-pointer',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tactive: {\n\t\t\t\tfalse: ['hover:bg-off-white'],\n\t\t\t\ttrue: ['bg-off-white-600 text-black-teal-500 font-semibold'],\n\t\t\t},\n\t\t\ticon: {\n\t\t\t\tfalse: false,\n\t\t\t\ttrue: ['pl-1'],\n\t\t\t},\n\t\t},\n\t}\n);\n\nconst navigationItemIconContainer = cva(\n\t['flex h-6 aspect-branding items-center justify-center rounded-full'],\n\t{\n\t\tvariants: {\n\t\t\tactive: {\n\t\t\t\tfalse: false,\n\t\t\t\ttrue: ['bg-supportive-lilac'],\n\t\t\t},\n\t\t},\n\t}\n);\n\n@Component({\n\ttag: 'p-navigation-item',\n\tstyleUrl: './navigation-item.component.scss',\n\tshadow: false,\n})\nexport class NavigationItem {\n\t/**\n\t * Icon of the navigation item\n\t */\n\t@Prop() icon!: IconVariant;\n\n\t/**\n\t * Wether the navigation item is active\n\t */\n\t@Prop() active: boolean = false;\n\n\t/**\n\t * The element to use for the navigation item\n\t */\n\t@Prop() as: string = 'a';\n\n\t/**\n\t * Icon of the navigation item\n\t */\n\t@Prop() counter: number | string;\n\n\t/**\n\t * The href of the navigation item\n\t */\n\t@Prop() href: string;\n\n\t/**\n\t * The target of the navigation item\n\t */\n\t@Prop() target: string;\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\trender() {\n\t\tconst TagType = this.as;\n\n\t\tconst active = this.active || this._el.classList.contains('active');\n\n\t\treturn (\n\t\t\t<Host class='p-navigation-item inline-block'>\n\t\t\t\t<TagType\n\t\t\t\t\tclass={navigationItem({\n\t\t\t\t\t\ticon: !!this.icon,\n\t\t\t\t\t\tactive,\n\t\t\t\t\t})}\n\t\t\t\t\thref={this.href}\n\t\t\t\t\ttarget={this.target}\n\t\t\t\t>\n\t\t\t\t\t<div class={navigationItemIconContainer({ active })}>\n\t\t\t\t\t\t<p-icon variant={this.icon} />\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<span class={this.counter && 'has-counter'}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</span>\n\n\t\t\t\t\t{!!this.counter && this.counter !== '0' && (\n\t\t\t\t\t\t<p-badge>{this.counter}</p-badge>\n\t\t\t\t\t)}\n\t\t\t\t</TagType>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
*{box-sizing:border-box}.static{position:static!important}.absolute{position:absolute!important}.block{display:block!important}.inline-block{display:inline-block!important}.flex{display:flex!important}.h-10{height:2.5rem!important}.w-full{width:100%!important}.flex-1{flex:1 1 0%!important}.
|
|
1
|
+
*{box-sizing:border-box}.static{position:static!important}.absolute{position:absolute!important}.block{display:block!important}.inline-block{display:inline-block!important}.flex{display:flex!important}.h-10{height:2.5rem!important}.w-full{width:100%!important}.w-inherit{width:inherit!important}.min-w-0{min-width:0!important}.flex-1{flex:1 1 0%!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.gap-2{gap:.5rem!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.whitespace-nowrap{white-space:nowrap!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.py-1{padding-bottom:.25rem!important;padding-top:.25rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.font-medium{font-weight:500!important}.text-black-teal-300{--tw-text-opacity:1!important;color:rgb(104 127 124/var(--tw-text-opacity,1))!important}
|
|
@@ -1,21 +1,16 @@
|
|
|
1
1
|
import { h, Host } from "@stencil/core";
|
|
2
2
|
import { cva } from "class-variance-authority";
|
|
3
|
-
const profileContent = cva(['flex
|
|
3
|
+
const profileContent = cva(['flex gap-2 items-center flex-1 min-w-0'], {
|
|
4
4
|
variants: {
|
|
5
5
|
dropdown: {
|
|
6
|
-
false: 'py-1',
|
|
7
|
-
true:
|
|
8
|
-
},
|
|
9
|
-
dropdownOpen: {
|
|
10
|
-
false: 'border-black-teal-100',
|
|
11
|
-
true: 'shadow-2 border-supportive-lilac-800 ring ring-2 ring-supportive-lilac-100',
|
|
6
|
+
false: 'h-10 py-1',
|
|
7
|
+
true: null,
|
|
12
8
|
},
|
|
13
9
|
},
|
|
14
10
|
});
|
|
15
11
|
export class Profile {
|
|
16
12
|
constructor() {
|
|
17
13
|
this.dropdownLocation = 'bottom-end';
|
|
18
|
-
this.size = 'base';
|
|
19
14
|
this._dropdownOpen = false;
|
|
20
15
|
this._hasDropdownSlot = false;
|
|
21
16
|
}
|
|
@@ -27,13 +22,12 @@ export class Profile {
|
|
|
27
22
|
}
|
|
28
23
|
render() {
|
|
29
24
|
const content = this._getContent();
|
|
30
|
-
return (h(Host, { class: 'p-profile inline-block' }, this._hasDropdownSlot ? (h("p-dropdown", { class: 'block', strategy: 'absolute', placement: this.dropdownLocation, applyFullWidth: true, applyMaxWidth: false, onIsOpen: ev => (this._dropdownOpen = ev.detail) }, content, h("div", { slot: 'items' }, h("slot", { name: 'dropdown' })))) : (content)));
|
|
25
|
+
return (h(Host, { class: 'p-profile inline-block w-inherit' }, this._hasDropdownSlot ? (h("p-dropdown", { class: 'block', strategy: 'absolute', placement: this.dropdownLocation, applyFullWidth: true, applyMaxWidth: false, onIsOpen: ev => (this._dropdownOpen = ev.detail) }, h("p-button", { variant: 'dropdown', chevron: this._dropdownOpen ? 'up' : 'down', active: this._dropdownOpen, slot: 'trigger', size: 'lg', class: 'w-full px-2' }, content), h("div", { slot: 'items' }, h("slot", { name: 'dropdown' })))) : (content)));
|
|
31
26
|
}
|
|
32
27
|
_getContent() {
|
|
33
28
|
return (h("div", { class: profileContent({
|
|
34
29
|
dropdown: this._hasDropdownSlot,
|
|
35
|
-
|
|
36
|
-
}), slot: 'trigger' }, h("slot", { name: 'avatar' }), h("div", { class: 'flex flex-1 flex-col' }, h("p", { class: 'font-sm font-medium' }, h("slot", { name: 'title' })), h("p", { class: 'text-xs text-black-teal-300' }, h("slot", { name: 'subtitle' }))), h("slot", { name: 'post-title' }), this._hasDropdownSlot && this._getIcon()));
|
|
30
|
+
}) }, h("slot", { name: 'avatar' }), h("div", { class: 'flex min-w-0 flex-1 flex-col' }, h("p", { class: 'overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium' }, h("slot", { name: 'title' })), h("p", { class: 'overflow-hidden text-ellipsis whitespace-nowrap text-xs text-black-teal-300' }, h("slot", { name: 'subtitle' }))), h("slot", { name: 'post-title' })));
|
|
37
31
|
}
|
|
38
32
|
_updateAvatar() {
|
|
39
33
|
const avatar = this._el.querySelector('p-avatar[slot="avatar"]');
|
|
@@ -42,9 +36,6 @@ export class Profile {
|
|
|
42
36
|
}
|
|
43
37
|
avatar.size = this._hasDropdownSlot ? 'sm' : avatar.size;
|
|
44
38
|
}
|
|
45
|
-
_getIcon() {
|
|
46
|
-
return (h("p-icon", { variant: 'caret', flip: this._dropdownOpen ? 'vertical' : 'horizontal' }));
|
|
47
|
-
}
|
|
48
39
|
static get is() { return "p-profile"; }
|
|
49
40
|
static get originalStyleUrls() {
|
|
50
41
|
return {
|
|
@@ -75,24 +66,6 @@ export class Profile {
|
|
|
75
66
|
"attribute": "dropdown-location",
|
|
76
67
|
"reflect": false,
|
|
77
68
|
"defaultValue": "'bottom-end'"
|
|
78
|
-
},
|
|
79
|
-
"size": {
|
|
80
|
-
"type": "string",
|
|
81
|
-
"mutable": false,
|
|
82
|
-
"complexType": {
|
|
83
|
-
"original": "| 'xs'\n\t\t| 'sm'\n\t\t| 'base'\n\t\t| 'lg'\n\t\t| 'xl'\n\t\t| '2xl'\n\t\t| '3xl'\n\t\t| '4xl'",
|
|
84
|
-
"resolved": "\"2xl\" | \"3xl\" | \"4xl\" | \"base\" | \"lg\" | \"sm\" | \"xl\" | \"xs\"",
|
|
85
|
-
"references": {}
|
|
86
|
-
},
|
|
87
|
-
"required": false,
|
|
88
|
-
"optional": false,
|
|
89
|
-
"docs": {
|
|
90
|
-
"tags": [],
|
|
91
|
-
"text": "The size of the profile avatar"
|
|
92
|
-
},
|
|
93
|
-
"attribute": "size",
|
|
94
|
-
"reflect": true,
|
|
95
|
-
"defaultValue": "'base'"
|
|
96
69
|
}
|
|
97
70
|
};
|
|
98
71
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"profile.component.js","sourceRoot":"","sources":["../../../../src/components/molecules/profile/profile.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAE/C,MAAM,cAAc,GAAG,GAAG,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"profile.component.js","sourceRoot":"","sources":["../../../../src/components/molecules/profile/profile.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAE/C,MAAM,cAAc,GAAG,GAAG,CAAC,CAAC,wCAAwC,CAAC,EAAE;EACtE,QAAQ,EAAE;IACT,QAAQ,EAAE;MACT,KAAK,EAAE,WAAW;MAClB,IAAI,EAAE,IAAI;KACV;GACD;CACD,CAAC,CAAC;AAMH,MAAM,OAAO,OAAO;;4BAIkC,YAAY;yBAOhC,KAAK;4BACF,KAAK;;EAEzC,iBAAiB;IAChB,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CAC/C,4BAA4B,CAC5B,CAAC;EACH,CAAC;EAED,mBAAmB;IAClB,IAAI,CAAC,aAAa,EAAE,CAAC;EACtB,CAAC;EAED,MAAM;IACL,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;IACnC,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAC,kCAAkC,IAC5C,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CACxB,kBACC,KAAK,EAAC,OAAO,EACb,QAAQ,EAAC,UAAU,EACnB,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAChC,cAAc,EAAE,IAAI,EACpB,aAAa,EAAE,KAAK,EACpB,QAAQ,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC,MAAM,CAAC;MAEhD,gBACC,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,EAC3C,MAAM,EAAE,IAAI,CAAC,aAAa,EAC1B,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,aAAa,IAElB,OAAO,CACE;MACX,WAAK,IAAI,EAAC,OAAO;QAChB,YAAM,IAAI,EAAC,UAAU,GAAG,CACnB,CACM,CACb,CAAC,CAAC,CAAC,CACH,OAAO,CACP,CACK,CACP,CAAC;EACH,CAAC;EAEO,WAAW;IAClB,OAAO,CACN,WACC,KAAK,EAAE,cAAc,CAAC;QACrB,QAAQ,EAAE,IAAI,CAAC,gBAAgB;OAC/B,CAAC;MAEF,YAAM,IAAI,EAAC,QAAQ,GAAG;MACtB,WAAK,KAAK,EAAC,8BAA8B;QACxC,SAAG,KAAK,EAAC,qEAAqE;UAC7E,YAAM,IAAI,EAAC,OAAO,GAAG,CAClB;QACJ,SAAG,KAAK,EAAC,6EAA6E;UACrF,YAAM,IAAI,EAAC,UAAU,GAAG,CACrB,CACC;MAEN,YAAM,IAAI,EAAC,YAAY,GAAG,CACrB,CACN,CAAC;EACH,CAAC;EAEO,aAAa;IACpB,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CACpC,yBAAyB,CACH,CAAC;IAExB,IAAI,CAAC,MAAM,EAAE;MACZ,OAAO;KACP;IAED,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC;EAC1D,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\n\nconst profileContent = cva(['flex gap-2 items-center flex-1 min-w-0'], {\n\tvariants: {\n\t\tdropdown: {\n\t\t\tfalse: 'h-10 py-1',\n\t\t\ttrue: null,\n\t\t},\n\t},\n});\n\n@Component({\n\ttag: 'p-profile',\n\tstyleUrl: 'profile.component.scss',\n})\nexport class Profile {\n\t/**\n\t * The position of the dropdown\n\t */\n\t@Prop() dropdownLocation: 'top-end' | 'bottom-end' = 'bottom-end';\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\t@State() private _dropdownOpen = false;\n\t@State() private _hasDropdownSlot = false;\n\n\tcomponentWillLoad() {\n\t\tthis._hasDropdownSlot = !!this._el.querySelector(\n\t\t\t':scope > [slot=\"dropdown\"]'\n\t\t);\n\t}\n\n\tcomponentWillRender() {\n\t\tthis._updateAvatar();\n\t}\n\n\trender() {\n\t\tconst content = this._getContent();\n\t\treturn (\n\t\t\t<Host class='p-profile inline-block w-inherit'>\n\t\t\t\t{this._hasDropdownSlot ? (\n\t\t\t\t\t<p-dropdown\n\t\t\t\t\t\tclass='block'\n\t\t\t\t\t\tstrategy='absolute'\n\t\t\t\t\t\tplacement={this.dropdownLocation}\n\t\t\t\t\t\tapplyFullWidth={true}\n\t\t\t\t\t\tapplyMaxWidth={false}\n\t\t\t\t\t\tonIsOpen={ev => (this._dropdownOpen = ev.detail)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<p-button\n\t\t\t\t\t\t\tvariant='dropdown'\n\t\t\t\t\t\t\tchevron={this._dropdownOpen ? 'up' : 'down'}\n\t\t\t\t\t\t\tactive={this._dropdownOpen}\n\t\t\t\t\t\t\tslot='trigger'\n\t\t\t\t\t\t\tsize='lg'\n\t\t\t\t\t\t\tclass='w-full px-2'\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{content}\n\t\t\t\t\t\t</p-button>\n\t\t\t\t\t\t<div slot='items'>\n\t\t\t\t\t\t\t<slot name='dropdown' />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</p-dropdown>\n\t\t\t\t) : (\n\t\t\t\t\tcontent\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate _getContent() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={profileContent({\n\t\t\t\t\tdropdown: this._hasDropdownSlot,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<slot name='avatar' />\n\t\t\t\t<div class='flex min-w-0 flex-1 flex-col'>\n\t\t\t\t\t<p class='overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium'>\n\t\t\t\t\t\t<slot name='title' />\n\t\t\t\t\t</p>\n\t\t\t\t\t<p class='overflow-hidden text-ellipsis whitespace-nowrap text-xs text-black-teal-300'>\n\t\t\t\t\t\t<slot name='subtitle' />\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\n\t\t\t\t<slot name='post-title' />\n\t\t\t</div>\n\t\t);\n\t}\n\n\tprivate _updateAvatar() {\n\t\tconst avatar = this._el.querySelector(\n\t\t\t'p-avatar[slot=\"avatar\"]'\n\t\t) as HTMLPAvatarElement;\n\n\t\tif (!avatar) {\n\t\t\treturn;\n\t\t}\n\n\t\tavatar.size = this._hasDropdownSlot ? 'sm' : avatar.size;\n\t}\n}\n"]}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
import { c as cva } from './index2.js';
|
|
3
3
|
|
|
4
|
-
const avatarComponentCss = "*{box-sizing:border-box}.static{position:static!important}.z-0{z-index:0!important}.flex{display:flex!important}.aspect-branding{aspect-ratio:23/24!important}.h-10{height:2.5rem!important}.h-14{height:3.5rem!important}.h-20{height:5rem!important}.h-4{height:1rem!important}.h-6{height:1.5rem!important}.h-8{height:2rem!important}.h-\\[6\\.5rem\\]{height:6.5rem!important}.h-\\[8\\.5rem\\]{height:8.5rem!important}.h-full{height:100%!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.rounded-full{border-radius:9999px!important}.bg-off-white{--tw-bg-opacity:1!important;background-color:rgb(243 241 237/var(--tw-bg-opacity,1))!important}.object-cover{object-fit:cover!important}.p-\\[1px\\]{padding:1px!important}.font-ambit{font-family:Ambit,sans-serif!important}.text-4xl{font-size:2.5rem!important;line-height:3rem!important}.text-\\[3\\.5rem\\]{font-size:3.5rem!important}.text-\\[4\\.5rem\\]{font-size:4.5rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.text-xs{font-size:.75rem!important}.text-xs,.text-xxs{line-height:1rem!important}.text-xxs{font-size:.5rem!important}.leading-\\[4rem\\]{line-height:4rem!important}.leading-\\[5rem\\]{line-height:5rem!important}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.ring-inset{--tw-ring-inset:inset!important}.ring-black-teal\\/20{--tw-ring-color:rgba(3,42,36,.2)!important}";
|
|
4
|
+
const avatarComponentCss = "*{box-sizing:border-box}.static{position:static!important}.z-0{z-index:0!important}.flex{display:flex!important}.aspect-branding{aspect-ratio:23/24!important}.h-10{height:2.5rem!important}.h-14{height:3.5rem!important}.h-20{height:5rem!important}.h-4{height:1rem!important}.h-6{height:1.5rem!important}.h-8{height:2rem!important}.h-\\[6\\.5rem\\]{height:6.5rem!important}.h-\\[8\\.5rem\\]{height:8.5rem!important}.h-full{height:100%!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.rounded-full{border-radius:9999px!important}.bg-off-white{--tw-bg-opacity:1!important;background-color:rgb(243 241 237/var(--tw-bg-opacity,1))!important}.object-cover{object-fit:cover!important}.p-\\[1px\\]{padding:1px!important}.font-ambit{font-family:Ambit,sans-serif!important}.text-4xl{font-size:2.5rem!important;line-height:3rem!important}.text-\\[3\\.5rem\\]{font-size:3.5rem!important}.text-\\[4\\.5rem\\]{font-size:4.5rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.text-xs{font-size:.75rem!important}.text-xs,.text-xxs{line-height:1rem!important}.text-xxs{font-size:.5rem!important}.leading-\\[4rem\\]{line-height:4rem!important}.leading-\\[5rem\\]{line-height:5rem!important}.leading-none{line-height:1!important}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.ring-inset{--tw-ring-inset:inset!important}.ring-black-teal\\/20{--tw-ring-color:rgba(3,42,36,.2)!important}";
|
|
5
5
|
|
|
6
6
|
const avatar = cva([
|
|
7
|
-
'p-avatar bg-off-white rounded-full aspect-branding ring-inset ring-1 ring-black-teal/20 p-[1px] flex items-center justify-center font-ambit',
|
|
7
|
+
'p-avatar bg-off-white rounded-full aspect-branding ring-inset ring-1 ring-black-teal/20 p-[1px] flex items-center justify-center font-ambit leading-none',
|
|
8
8
|
], {
|
|
9
9
|
variants: {
|
|
10
10
|
size: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"avatar.component.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,
|
|
1
|
+
{"file":"avatar.component.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,gxDAAgxD;;ACG3yD,MAAM,MAAM,GAAG,GAAG,CACjB;EACC,0JAA0J;CAC1J,EACD;EACC,QAAQ,EAAE;IACT,IAAI,EAAE;MACL,EAAE,EAAE,cAAc;MAClB,EAAE,EAAE,aAAa;MACjB,IAAI,EAAE,eAAe;MACrB,EAAE,EAAE,cAAc;MAClB,EAAE,EAAE,cAAc;MAClB,KAAK,EAAE,eAAe;MACtB,KAAK,EAAE,yCAAyC;MAChD,KAAK,EAAE,yCAAyC;KAChD;GACD;CACD,CACD,CAAC;MAOW,MAAM;;;;gBAYP,MAAM;;;;;mBAkBmB,KAAK;;EAGzC,YAAY,CAAC,GAAW;IACvB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACrB,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC;GAChB;EAED,iBAAiB;IAChB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC5B,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACf,IAAI,CAAC,UAAU,EAAE,CAAC;KAClB;GACD;EAED,MAAM;;IACL,QACC,EAAC,IAAI,IACJ,KAAK,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,IAAI,CAAC,IAAI;OACf,CAAC,IAED,IAAI,CAAC,OAAO,IACZ,MAAA,MAAA,IAAI,CAAC,OAAO,0CAAG,CAAC,CAAC,mCAAI,GAAG,KAExB,WACC,GAAG,EAAE,IAAI,CAAC,IAAI,EACd,KAAK,EAAC,sDAAsD,EAC5D,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,GAC/B,CACF,CACK,EACN;GACF;EAEO,UAAU;IACjB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACpB,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;GACtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/avatar/avatar.component.scss?tag=p-avatar","src/components/atoms/avatar/avatar.component.tsx"],"sourcesContent":["","import { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\n\nconst avatar = cva(\n\t[\n\t\t'p-avatar bg-off-white rounded-full aspect-branding ring-inset ring-1 ring-black-teal/20 p-[1px] flex items-center justify-center font-ambit leading-none',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\txs: 'h-4 text-xxs',\n\t\t\t\tsm: 'h-6 text-xs',\n\t\t\t\tbase: 'h-8 text-base',\n\t\t\t\tlg: 'h-10 text-xl',\n\t\t\t\txl: 'h-14 text-xl',\n\t\t\t\t'2xl': 'h-20 text-4xl',\n\t\t\t\t'3xl': 'h-[6.5rem] text-[3.5rem] leading-[4rem]',\n\t\t\t\t'4xl': 'h-[8.5rem] text-[4.5rem] leading-[5rem]',\n\t\t\t},\n\t\t},\n\t}\n);\n\n@Component({\n\ttag: 'p-avatar',\n\tstyleUrl: 'avatar.component.scss',\n\t// shadow: true,\n})\nexport class Avatar {\n\t/**\n\t * The size of the avatar\n\t */\n\t@Prop({ reflect: true }) size:\n\t\t| 'xs'\n\t\t| 'sm'\n\t\t| 'base'\n\t\t| 'lg'\n\t\t| 'xl'\n\t\t| '2xl'\n\t\t| '3xl'\n\t\t| '4xl' = 'base';\n\n\t/**\n\t * The default image to show on errors\n\t */\n\t@Prop() defaultImage: string;\n\n\t/**\n\t * The image used for the avatar\n\t */\n\t@Prop() src!: string;\n\n\t/**\n\t * The letters to show on the empty state variant\n\t */\n\t@Prop() letters: string;\n\n\t@State() private _src: string;\n\t@State() private _failed: boolean = false;\n\n\t@Watch('src')\n\tonSrchChange(src: string) {\n\t\tthis._failed = false;\n\t\tthis._src = src;\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.onSrchChange(this.src);\n\t\tif (!this._src) {\n\t\t\tthis._setFailed();\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={avatar({\n\t\t\t\t\tsize: this.size,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{this._failed ? (\n\t\t\t\t\tthis.letters?.[0] ?? ' '\n\t\t\t\t) : (\n\t\t\t\t\t<img\n\t\t\t\t\t\tsrc={this._src}\n\t\t\t\t\t\tclass='z-0 aspect-branding h-full rounded-full object-cover'\n\t\t\t\t\t\tonError={() => this._setFailed()}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate _setFailed() {\n\t\tthis._failed = true;\n\t\tthis._src = undefined;\n\t}\n}\n"],"version":3}
|
|
@@ -3,7 +3,7 @@ import { c as cva } from './index2.js';
|
|
|
3
3
|
import { d as defineCustomElement$2 } from './icon.component.js';
|
|
4
4
|
import { d as defineCustomElement$1 } from './loader.component.js';
|
|
5
5
|
|
|
6
|
-
const buttonComponentCss = "*{box-sizing:border-box}.static{position:static!important}.
|
|
6
|
+
const buttonComponentCss = "*{box-sizing:border-box}.static{position:static!important}.block{display:block!important}.flex{display:flex!important}.h-10{height:2.5rem!important}.h-6{height:1.5rem!important}.h-8{height:2rem!important}.w-10{width:2.5rem!important}.w-6{width:1.5rem!important}.w-8{width:2rem!important}.w-inherit{width:inherit!important}.cursor-not-allowed{cursor:not-allowed!important}.cursor-pointer{cursor:pointer!important}.cursor-wait{cursor:wait!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.gap-2{gap:.5rem!important}.rounded-lg{border-radius:.5rem!important}.rounded-e-lg{border-end-end-radius:.5rem!important;border-start-end-radius:.5rem!important}.rounded-s-lg{border-end-start-radius:.5rem!important;border-start-start-radius:.5rem!important}.border{border-width:1px!important}.border-b{border-bottom-width:1px!important}.border-black-teal\\/10{border-color:rgba(3,42,36,.1)!important}.border-black-teal\\/20{border-color:rgba(3,42,36,.2)!important}.border-supportive-lilac-800{--tw-border-opacity:1!important;border-color:rgb(189 140 255/var(--tw-border-opacity,1))!important}.border-teal{border-color:rgb(8 136 121/var(--tw-border-opacity,1))!important}.border-teal,.border-teal-100{--tw-border-opacity:1!important}.border-teal-100{border-color:rgb(206 231 228/var(--tw-border-opacity,1))!important}.bg-supportive-lilac{--tw-bg-opacity:1!important;background-color:rgb(209 174 255/var(--tw-bg-opacity,1))!important}.bg-supportive-lilac-100{--tw-bg-opacity:1!important;background-color:rgb(246 239 255/var(--tw-bg-opacity,1))!important}.bg-transparent{background-color:transparent!important}.bg-white{background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.bg-white,.bg-white-600{--tw-bg-opacity:1!important}.bg-white-600{background-color:rgb(250 250 250/var(--tw-bg-opacity,1))!important}.p-2{padding:.5rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.px-3{padding-left:.75rem!important;padding-right:.75rem!important}.py-1{padding-bottom:.25rem!important;padding-top:.25rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.font-semibold{font-weight:600!important}.leading-4{line-height:1rem!important}.text-black-teal{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important}.text-black-teal-100{--tw-text-opacity:1!important;color:rgb(205 212 211/var(--tw-text-opacity,1))!important}.text-dark-teal-100{--tw-text-opacity:1!important;color:rgb(204 220 218/var(--tw-text-opacity,1))!important}.text-dark-teal-100\\/60{color:rgba(204,220,218,.6)!important}.text-teal{color:rgb(8 136 121/var(--tw-text-opacity,1))!important}.text-teal,.text-teal-100{--tw-text-opacity:1!important}.text-teal-100{color:rgb(206 231 228/var(--tw-text-opacity,1))!important}.underline{text-decoration-line:underline!important}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important}.ring,.ring-2{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important}.ring-black-teal\\/10{--tw-ring-color:rgba(3,42,36,.1)!important}.ring-supportive-lilac-100{--tw-ring-opacity:1!important;--tw-ring-color:rgb(246 239 255/var(--tw-ring-opacity,1))!important}.drop-shadow-1{--tw-drop-shadow:drop-shadow(0 1px 1px rgba(0,2,2,.08))!important}.drop-shadow-1,.drop-shadow-supportive-lilac{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.drop-shadow-supportive-lilac{--tw-drop-shadow:drop-shadow(0px 1px 1px 0px rgba(189,140,255,.2))!important}.hover\\:bg-dark-teal:hover{--tw-bg-opacity:1!important;background-color:rgb(0 81 72/var(--tw-bg-opacity,1))!important}.hover\\:bg-supportive-lilac-700:hover{--tw-bg-opacity:1!important;background-color:rgb(200 159 255/var(--tw-bg-opacity,1))!important}.hover\\:bg-white-600:hover{--tw-bg-opacity:1!important;background-color:rgb(250 250 250/var(--tw-bg-opacity,1))!important}.hover\\:drop-shadow-1:hover{--tw-drop-shadow:drop-shadow(0 1px 1px rgba(0,2,2,.08))!important}.hover\\:drop-shadow-1:hover,.hover\\:drop-shadow-2:hover{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.hover\\:drop-shadow-2:hover{--tw-drop-shadow:drop-shadow(0 1px 1px rgba(0,2,2,.04)) drop-shadow(0 2px 2px rgba(0,2,2,.04)) drop-shadow(0 4px 4px rgba(0,2,2,.04))!important}.active\\:border-supportive-lilac-800:active{--tw-border-opacity:1!important;border-color:rgb(189 140 255/var(--tw-border-opacity,1))!important}.active\\:text-black-teal\\/60:active{color:rgba(3,42,36,.6)!important}.active\\:text-dark-teal-100\\/60:active{color:rgba(204,220,218,.6)!important}.active\\:text-teal-800:active{--tw-text-opacity:1!important;color:rgb(2 102 92/var(--tw-text-opacity,1))!important}.active\\:ring:active{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important}.active\\:ring-2:active,.active\\:ring:active{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.active\\:ring-2:active{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important}.active\\:ring-black-teal\\/10:active{--tw-ring-color:rgba(3,42,36,.1)!important}.active\\:ring-supportive-lilac-100:active{--tw-ring-opacity:1!important;--tw-ring-color:rgb(246 239 255/var(--tw-ring-opacity,1))!important}";
|
|
7
7
|
|
|
8
8
|
const button = cva([
|
|
9
9
|
'group',
|
|
@@ -14,9 +14,10 @@ const button = cva([
|
|
|
14
14
|
variants: {
|
|
15
15
|
variant: {
|
|
16
16
|
primary: ['bg-supportive-lilac border-black-teal/20'],
|
|
17
|
-
secondary:
|
|
17
|
+
secondary: null,
|
|
18
18
|
text: ['text-teal'],
|
|
19
19
|
transparent: ['bg-transparent'],
|
|
20
|
+
dropdown: null,
|
|
20
21
|
},
|
|
21
22
|
active: {
|
|
22
23
|
true: null,
|
|
@@ -53,33 +54,44 @@ const button = cva([
|
|
|
53
54
|
compoundVariants: [
|
|
54
55
|
// variants
|
|
55
56
|
{
|
|
56
|
-
variant: ['
|
|
57
|
+
variant: ['secondary', 'dropdown'],
|
|
58
|
+
class: ['bg-white border-black-teal/10'],
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
variant: ['primary', 'secondary', 'dropdown'],
|
|
57
62
|
disabled: false,
|
|
58
63
|
class: 'border',
|
|
59
64
|
},
|
|
60
65
|
{
|
|
61
|
-
variant: ['primary', 'secondary'],
|
|
66
|
+
variant: ['primary', 'secondary', 'dropdown'],
|
|
62
67
|
disabled: false,
|
|
63
68
|
loading: false,
|
|
64
|
-
class: 'active:border-supportive-lilac-800 active:ring active:ring-2
|
|
69
|
+
class: 'active:border-supportive-lilac-800 active:ring active:ring-2',
|
|
65
70
|
},
|
|
66
71
|
{
|
|
67
|
-
variant: ['primary', 'secondary', '
|
|
72
|
+
variant: ['primary', 'secondary', 'dropdown'],
|
|
73
|
+
disabled: false,
|
|
74
|
+
loading: false,
|
|
75
|
+
active: true,
|
|
76
|
+
class: 'border-supportive-lilac-800 ring ring-2',
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
variant: ['primary', 'secondary', 'transparent', 'dropdown'],
|
|
68
80
|
buttonGroupPosition: 'none',
|
|
69
81
|
class: 'rounded-lg',
|
|
70
82
|
},
|
|
71
83
|
{
|
|
72
|
-
variant: ['primary', 'secondary', 'transparent'],
|
|
84
|
+
variant: ['primary', 'secondary', 'transparent', 'dropdown'],
|
|
73
85
|
buttonGroupPosition: 'start',
|
|
74
86
|
class: 'rounded-s-lg',
|
|
75
87
|
},
|
|
76
88
|
{
|
|
77
|
-
variant: ['primary', 'secondary', 'transparent'],
|
|
89
|
+
variant: ['primary', 'secondary', 'transparent', 'dropdown'],
|
|
78
90
|
buttonGroupPosition: 'end',
|
|
79
91
|
class: 'rounded-e-lg',
|
|
80
92
|
},
|
|
81
93
|
{
|
|
82
|
-
variant: ['primary', 'secondary'],
|
|
94
|
+
variant: ['primary', 'secondary', 'dropdown'],
|
|
83
95
|
disabled: false,
|
|
84
96
|
class: 'text-black-teal',
|
|
85
97
|
},
|
|
@@ -95,16 +107,30 @@ const button = cva([
|
|
|
95
107
|
class: 'drop-shadow-supportive-lilac hover:drop-shadow-2 hover:bg-supportive-lilac-700 active:text-black-teal/60 active:ring-black-teal/10',
|
|
96
108
|
},
|
|
97
109
|
{
|
|
98
|
-
variant: '
|
|
110
|
+
variant: 'primary',
|
|
111
|
+
disabled: false,
|
|
112
|
+
loading: false,
|
|
113
|
+
active: true,
|
|
114
|
+
class: 'ring-black-teal/10',
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
variant: ['secondary', 'dropdown'],
|
|
99
118
|
disabled: true,
|
|
100
119
|
class: 'border bg-white-600 text-black-teal-100',
|
|
101
120
|
},
|
|
102
121
|
{
|
|
103
|
-
variant: 'secondary',
|
|
122
|
+
variant: ['secondary', 'dropdown'],
|
|
104
123
|
disabled: false,
|
|
105
124
|
loading: false,
|
|
106
125
|
class: 'drop-shadow-1 hover:drop-shadow-1 hover:bg-white-600 active:text-black-teal/60 active:ring-supportive-lilac-100',
|
|
107
126
|
},
|
|
127
|
+
{
|
|
128
|
+
variant: ['secondary', 'dropdown'],
|
|
129
|
+
disabled: false,
|
|
130
|
+
loading: false,
|
|
131
|
+
active: true,
|
|
132
|
+
class: 'ring-supportive-lilac-100',
|
|
133
|
+
},
|
|
108
134
|
{
|
|
109
135
|
variant: 'text',
|
|
110
136
|
underline: true,
|
|
@@ -157,6 +183,12 @@ const button = cva([
|
|
|
157
183
|
class: 'px-3',
|
|
158
184
|
},
|
|
159
185
|
{
|
|
186
|
+
variant: 'dropdown',
|
|
187
|
+
iconOnly: false,
|
|
188
|
+
class: 'p-2',
|
|
189
|
+
},
|
|
190
|
+
{
|
|
191
|
+
variant: ['primary', 'secondary', 'transparent', 'text'],
|
|
160
192
|
iconOnly: false,
|
|
161
193
|
class: 'py-1',
|
|
162
194
|
},
|
|
@@ -193,6 +225,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
|
|
|
193
225
|
this.onClick = createEvent(this, "onClick", 3);
|
|
194
226
|
this.as = 'button';
|
|
195
227
|
this.variant = 'primary';
|
|
228
|
+
this.active = false;
|
|
196
229
|
this.underline = true;
|
|
197
230
|
this.href = undefined;
|
|
198
231
|
this.target = undefined;
|
|
@@ -224,7 +257,8 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
|
|
|
224
257
|
const VariableTag = this.variant === 'text' || ((_a = this.href) === null || _a === void 0 ? void 0 : _a.length) || this.as === 'a'
|
|
225
258
|
? 'a'
|
|
226
259
|
: 'button';
|
|
227
|
-
|
|
260
|
+
const active = this.active || this._el.classList.contains('active');
|
|
261
|
+
return (h(Host, { class: 'p-button block' }, h(VariableTag, { disabled: this.disabled, href: this.href, type: this.variant !== 'text' ? this.type : undefined, target: this.target, class: button({
|
|
228
262
|
variant: this.variant,
|
|
229
263
|
size: this.size,
|
|
230
264
|
underline: this.underline,
|
|
@@ -232,6 +266,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
|
|
|
232
266
|
disabled: this.disabled,
|
|
233
267
|
buttonGroupPosition: this.buttonGroupPosition,
|
|
234
268
|
iconOnly: this.iconOnly,
|
|
269
|
+
active,
|
|
235
270
|
}) }, this.chevron && this.chevronPosition === 'start' && (h("p-icon", { variant: 'caret', rotate: this.chevron === 'up' ? 180 : 0 })), this.icon &&
|
|
236
271
|
this.iconPosition === 'start' &&
|
|
237
272
|
!(this.iconOnly && this.loading) &&
|
|
@@ -256,10 +291,12 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
|
|
|
256
291
|
size: this.size,
|
|
257
292
|
}), variant: this.icon, flip: this.iconFlip, rotate: this.iconRotate }));
|
|
258
293
|
}
|
|
294
|
+
get _el() { return this; }
|
|
259
295
|
static get style() { return buttonComponentCss; }
|
|
260
296
|
}, [4, "p-button", {
|
|
261
297
|
"as": [1],
|
|
262
298
|
"variant": [1],
|
|
299
|
+
"active": [4],
|
|
263
300
|
"underline": [4],
|
|
264
301
|
"href": [1],
|
|
265
302
|
"target": [1],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"button.component.js","mappings":"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","names":[],"sources":["src/components/molecules/button/button.component.scss?tag=p-button","src/components/molecules/button/button.component.tsx"],"sourcesContent":["","import {\n\tComponent,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tListen,\n\tProp,\n} from '@stencil/core';\nimport { RotateOptions } from '../../../types/tailwind';\nimport { IconFlipOptions, IconVariant } from '../../atoms/icon/icon.component';\nimport { cva } from 'class-variance-authority';\n\nconst button = cva(\n\t[\n\t\t'group',\n\t\t'font-semibold leading-4',\n\t\t'flex items-center justify-center gap-2',\n\t\t'cursor-pointer',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tprimary: ['bg-supportive-lilac border-black-teal/20'],\n\t\t\t\tsecondary: ['bg-white border-black-teal/10'],\n\t\t\t\ttext: ['text-teal'],\n\t\t\t\ttransparent: ['bg-transparent'],\n\t\t\t},\n\t\t\tactive: {\n\t\t\t\ttrue: null,\n\t\t\t\tfalse: null,\n\t\t\t},\n\t\t\tloading: {\n\t\t\t\ttrue: 'cursor-wait',\n\t\t\t\tfalse: null,\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\tsm: ['text-xs h-6'],\n\t\t\t\tbase: ['text-sm h-8'],\n\t\t\t\tlg: ['text-base h-10'],\n\t\t\t},\n\t\t\tdisabled: {\n\t\t\t\ttrue: 'cursor-not-allowed',\n\t\t\t\tfalse: null,\n\t\t\t},\n\t\t\tunderline: {\n\t\t\t\ttrue: null,\n\t\t\t\tfalse: null,\n\t\t\t},\n\t\t\tbuttonGroupPosition: {\n\t\t\t\tnone: null,\n\t\t\t\tstart: null,\n\t\t\t\tcenter: null,\n\t\t\t\tend: null,\n\t\t\t},\n\t\t\ticonOnly: {\n\t\t\t\ttrue: 'justify-center',\n\t\t\t\tfalse: 'w-inherit py-1',\n\t\t\t},\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t// variants\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary'],\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'border',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary'],\n\t\t\t\tdisabled: false,\n\t\t\t\tloading: false,\n\t\t\t\tclass: 'active:border-supportive-lilac-800 active:ring active:ring-2 ',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary', 'transparent'],\n\t\t\t\tbuttonGroupPosition: 'none',\n\t\t\t\tclass: 'rounded-lg',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary', 'transparent'],\n\t\t\t\tbuttonGroupPosition: 'start',\n\t\t\t\tclass: 'rounded-s-lg',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary', 'transparent'],\n\t\t\t\tbuttonGroupPosition: 'end',\n\t\t\t\tclass: 'rounded-e-lg',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary'],\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'text-black-teal',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'primary',\n\t\t\t\tdisabled: true,\n\t\t\t\tclass: 'bg-supportive-lilac-100 text-black-teal-100',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'primary',\n\t\t\t\tdisabled: false,\n\t\t\t\tloading: false,\n\t\t\t\tclass:\n\t\t\t\t\t'drop-shadow-supportive-lilac hover:drop-shadow-2 hover:bg-supportive-lilac-700 active:text-black-teal/60 active:ring-black-teal/10',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'secondary',\n\t\t\t\tdisabled: true,\n\t\t\t\tclass: 'border bg-white-600 text-black-teal-100',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'secondary',\n\t\t\t\tdisabled: false,\n\t\t\t\tloading: false,\n\t\t\t\tclass:\n\t\t\t\t\t'drop-shadow-1 hover:drop-shadow-1 hover:bg-white-600 active:text-black-teal/60 active:ring-supportive-lilac-100',\n\t\t\t},\n\n\t\t\t{\n\t\t\t\tvariant: 'text',\n\t\t\t\tunderline: true,\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'border-b border-teal',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'text',\n\t\t\t\tunderline: true,\n\t\t\t\tdisabled: true,\n\t\t\t\tclass: 'border-b border-teal-100',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'text',\n\t\t\t\tdisabled: true,\n\t\t\t\tclass: 'text-teal-100',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'text',\n\t\t\t\tdisabled: false,\n\t\t\t\tloading: false,\n\t\t\t\tclass: 'active:text-teal-800',\n\t\t\t},\n\n\t\t\t{\n\t\t\t\tvariant: 'transparent',\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'text-dark-teal-100',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'transparent',\n\t\t\t\tdisabled: false,\n\t\t\t\tloading: false,\n\t\t\t\tclass: 'hover:bg-dark-teal active:text-dark-teal-100/60',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'transparent',\n\t\t\t\tdisabled: true,\n\t\t\t\tclass: 'text-dark-teal-100/60',\n\t\t\t},\n\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary', 'transparent'],\n\t\t\t\tsize: ['base', 'sm'],\n\t\t\t\ticonOnly: false,\n\t\t\t\tclass: 'px-2',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary', 'transparent'],\n\t\t\t\tsize: 'lg',\n\t\t\t\ticonOnly: false,\n\t\t\t\tclass: 'px-3',\n\t\t\t},\n\n\t\t\t{\n\t\t\t\ticonOnly: false,\n\t\t\t\tclass: 'py-1',\n\t\t\t},\n\n\t\t\t{\n\t\t\t\tsize: 'sm',\n\t\t\t\ticonOnly: true,\n\t\t\t\tclass: 'w-6',\n\t\t\t},\n\t\t\t{\n\t\t\t\tsize: 'base',\n\t\t\t\ticonOnly: true,\n\t\t\t\tclass: 'w-8',\n\t\t\t},\n\t\t\t{\n\t\t\t\tsize: 'lg',\n\t\t\t\ticonOnly: true,\n\t\t\t\tclass: 'w-10',\n\t\t\t},\n\t\t],\n\t}\n);\n\nconst icon = cva([], {\n\tvariants: {\n\t\tsize: {\n\t\t\tsm: 'text-sm',\n\t\t\tbase: 'text-base',\n\t\t\tlg: 'text-base',\n\t\t},\n\t},\n});\n\n@Component({\n\ttag: 'p-button',\n\tstyleUrl: 'button.component.scss',\n})\nexport class Button {\n\t/**\n\t * The type of the button\n\t */\n\t@Prop() as: 'a' | 'button' = 'button';\n\n\t/**\n\t * The variant of the button\n\t */\n\t@Prop() variant: 'primary' | 'secondary' | 'transparent' | 'text' = 'primary';\n\n\t/**\n\t * Wether the text variant has underline\n\t */\n\t@Prop() underline: boolean = true;\n\n\t/**\n\t * Href in case of \"text\" version\n\t */\n\t@Prop() href: string;\n\n\t/**\n\t * Target in case of \"text\" version\n\t */\n\t@Prop() target: string;\n\n\t/**\n\t * The size of the button\n\t */\n\t@Prop() size: 'sm' | 'base' | 'lg' = 'base';\n\n\t/**\n\t * The type of the button\n\t */\n\t@Prop() type: 'button' | 'submit' = 'button';\n\n\t/**\n\t * Wether to show a loader or not\n\t */\n\t@Prop() loading: boolean = false;\n\n\t/**\n\t * Wether to show a chevron or not\n\t */\n\t@Prop() chevron: boolean | 'up' | 'down' = false;\n\n\t/**\n\t * Chevron position\n\t */\n\t@Prop() chevronPosition: 'start' | 'end' = 'end';\n\n\t/**\n\t * Wether the button is disabled\n\t */\n\t@Prop() disabled: boolean = false;\n\n\t/**\n\t * Icon to show on the button\n\t */\n\t@Prop() icon: IconVariant;\n\n\t/**\n\t * Wether the button is icon only\n\t */\n\t@Prop() iconOnly: boolean = false;\n\n\t/**\n\t * Icon position\n\t */\n\t@Prop() iconPosition: 'start' | 'end' = 'end';\n\n\t/**\n\t * Icon flip\n\t */\n\t@Prop() iconFlip: IconFlipOptions;\n\n\t/**\n\t * Icon rotate\n\t */\n\t@Prop() iconRotate: RotateOptions;\n\n\t/**\n\t * Wether the button should inherit text styles\n\t */\n\t@Prop() inheritText: boolean = false;\n\n\t/**\n\t * Position of the button in the button group, mostly un-used if not in a group\n\t */\n\t@Prop() buttonGroupPosition: 'start' | 'center' | 'end' | 'none' = 'none';\n\n\t/**\n\t * Button click event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tonClick: EventEmitter<MouseEvent>;\n\n\trender() {\n\t\tlet loaderColor: 'white' | 'storm' | 'indigo' = 'white';\n\t\tswitch (this.variant) {\n\t\t\tcase 'secondary':\n\t\t\t\tloaderColor = 'storm';\n\t\t\t\tbreak;\n\t\t\tcase 'text':\n\t\t\t\tloaderColor = 'indigo';\n\t\t\t\tbreak;\n\t\t}\n\n\t\tconst VariableTag =\n\t\t\tthis.variant === 'text' || this.href?.length || this.as === 'a'\n\t\t\t\t? 'a'\n\t\t\t\t: 'button';\n\n\t\treturn (\n\t\t\t<Host class='p-button inline-block'>\n\t\t\t\t<VariableTag\n\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\thref={this.href}\n\t\t\t\t\ttype={this.variant !== 'text' ? this.type : undefined}\n\t\t\t\t\ttarget={this.target}\n\t\t\t\t\tclass={button({\n\t\t\t\t\t\tvariant: this.variant,\n\t\t\t\t\t\tsize: this.size,\n\t\t\t\t\t\tunderline: this.underline,\n\t\t\t\t\t\tloading: this.loading,\n\t\t\t\t\t\tdisabled: this.disabled,\n\t\t\t\t\t\tbuttonGroupPosition: this.buttonGroupPosition,\n\t\t\t\t\t\ticonOnly: this.iconOnly,\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t{this.chevron && this.chevronPosition === 'start' && (\n\t\t\t\t\t\t<p-icon\n\t\t\t\t\t\t\tvariant='caret'\n\t\t\t\t\t\t\trotate={this.chevron === 'up' ? 180 : 0}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{this.icon &&\n\t\t\t\t\t\tthis.iconPosition === 'start' &&\n\t\t\t\t\t\t!(this.iconOnly && this.loading) &&\n\t\t\t\t\t\tthis._getIcon()}\n\n\t\t\t\t\t<slot />\n\n\t\t\t\t\t{this.icon &&\n\t\t\t\t\t\tthis.iconPosition === 'end' &&\n\t\t\t\t\t\t!this.loading &&\n\t\t\t\t\t\t!this.chevron &&\n\t\t\t\t\t\tthis._getIcon()}\n\n\t\t\t\t\t{this.chevron && !this.loading && this.chevronPosition === 'end' && (\n\t\t\t\t\t\t<p-icon\n\t\t\t\t\t\t\tvariant='caret'\n\t\t\t\t\t\t\trotate={this.chevron === 'up' ? 180 : 0}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{this.loading && <p-loader color={loaderColor} />}\n\t\t\t\t</VariableTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@Listen('click', { capture: true })\n\thandleClick(ev: MouseEvent) {\n\t\tif (this.loading || this.disabled) {\n\t\t\tev.preventDefault();\n\t\t\treturn;\n\t\t}\n\n\t\tthis.onClick.emit(ev);\n\t}\n\n\tprivate _getIcon() {\n\t\tif (!this.icon) {\n\t\t\treturn;\n\t\t}\n\n\t\treturn (\n\t\t\t<p-icon\n\t\t\t\tclass={icon({\n\t\t\t\t\tsize: this.size,\n\t\t\t\t})}\n\t\t\t\tvariant={this.icon}\n\t\t\t\tflip={this.iconFlip}\n\t\t\t\trotate={this.iconRotate}\n\t\t\t/>\n\t\t);\n\t}\n}\n"],"version":3}
|
|
1
|
+
{"file":"button.component.js","mappings":"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","names":[],"sources":["src/components/molecules/button/button.component.scss?tag=p-button","src/components/molecules/button/button.component.tsx"],"sourcesContent":["","import {\n\tComponent,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tListen,\n\tProp,\n\tElement,\n} from '@stencil/core';\nimport { RotateOptions } from '../../../types/tailwind';\nimport { IconFlipOptions, IconVariant } from '../../atoms/icon/icon.component';\nimport { cva } from 'class-variance-authority';\n\nconst button = cva(\n\t[\n\t\t'group',\n\t\t'font-semibold leading-4',\n\t\t'flex items-center justify-center gap-2',\n\t\t'cursor-pointer',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tprimary: ['bg-supportive-lilac border-black-teal/20'],\n\t\t\t\tsecondary: null,\n\t\t\t\ttext: ['text-teal'],\n\t\t\t\ttransparent: ['bg-transparent'],\n\t\t\t\tdropdown: null,\n\t\t\t},\n\t\t\tactive: {\n\t\t\t\ttrue: null,\n\t\t\t\tfalse: null,\n\t\t\t},\n\t\t\tloading: {\n\t\t\t\ttrue: 'cursor-wait',\n\t\t\t\tfalse: null,\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\tsm: ['text-xs h-6'],\n\t\t\t\tbase: ['text-sm h-8'],\n\t\t\t\tlg: ['text-base h-10'],\n\t\t\t},\n\t\t\tdisabled: {\n\t\t\t\ttrue: 'cursor-not-allowed',\n\t\t\t\tfalse: null,\n\t\t\t},\n\t\t\tunderline: {\n\t\t\t\ttrue: null,\n\t\t\t\tfalse: null,\n\t\t\t},\n\t\t\tbuttonGroupPosition: {\n\t\t\t\tnone: null,\n\t\t\t\tstart: null,\n\t\t\t\tcenter: null,\n\t\t\t\tend: null,\n\t\t\t},\n\t\t\ticonOnly: {\n\t\t\t\ttrue: 'justify-center',\n\t\t\t\tfalse: 'w-inherit py-1',\n\t\t\t},\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t// variants\n\t\t\t{\n\t\t\t\tvariant: ['secondary', 'dropdown'],\n\t\t\t\tclass: ['bg-white border-black-teal/10'],\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary', 'dropdown'],\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'border',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary', 'dropdown'],\n\t\t\t\tdisabled: false,\n\t\t\t\tloading: false,\n\t\t\t\tclass: 'active:border-supportive-lilac-800 active:ring active:ring-2',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary', 'dropdown'],\n\t\t\t\tdisabled: false,\n\t\t\t\tloading: false,\n\t\t\t\tactive: true,\n\t\t\t\tclass: 'border-supportive-lilac-800 ring ring-2',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary', 'transparent', 'dropdown'],\n\t\t\t\tbuttonGroupPosition: 'none',\n\t\t\t\tclass: 'rounded-lg',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary', 'transparent', 'dropdown'],\n\t\t\t\tbuttonGroupPosition: 'start',\n\t\t\t\tclass: 'rounded-s-lg',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary', 'transparent', 'dropdown'],\n\t\t\t\tbuttonGroupPosition: 'end',\n\t\t\t\tclass: 'rounded-e-lg',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary', 'dropdown'],\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'text-black-teal',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'primary',\n\t\t\t\tdisabled: true,\n\t\t\t\tclass: 'bg-supportive-lilac-100 text-black-teal-100',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'primary',\n\t\t\t\tdisabled: false,\n\t\t\t\tloading: false,\n\t\t\t\tclass:\n\t\t\t\t\t'drop-shadow-supportive-lilac hover:drop-shadow-2 hover:bg-supportive-lilac-700 active:text-black-teal/60 active:ring-black-teal/10',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'primary',\n\t\t\t\tdisabled: false,\n\t\t\t\tloading: false,\n\t\t\t\tactive: true,\n\t\t\t\tclass: 'ring-black-teal/10',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['secondary', 'dropdown'],\n\t\t\t\tdisabled: true,\n\t\t\t\tclass: 'border bg-white-600 text-black-teal-100',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['secondary', 'dropdown'],\n\t\t\t\tdisabled: false,\n\t\t\t\tloading: false,\n\t\t\t\tclass:\n\t\t\t\t\t'drop-shadow-1 hover:drop-shadow-1 hover:bg-white-600 active:text-black-teal/60 active:ring-supportive-lilac-100',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['secondary', 'dropdown'],\n\t\t\t\tdisabled: false,\n\t\t\t\tloading: false,\n\t\t\t\tactive: true,\n\t\t\t\tclass: 'ring-supportive-lilac-100',\n\t\t\t},\n\n\t\t\t{\n\t\t\t\tvariant: 'text',\n\t\t\t\tunderline: true,\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'border-b border-teal',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'text',\n\t\t\t\tunderline: true,\n\t\t\t\tdisabled: true,\n\t\t\t\tclass: 'border-b border-teal-100',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'text',\n\t\t\t\tdisabled: true,\n\t\t\t\tclass: 'text-teal-100',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'text',\n\t\t\t\tdisabled: false,\n\t\t\t\tloading: false,\n\t\t\t\tclass: 'active:text-teal-800',\n\t\t\t},\n\n\t\t\t{\n\t\t\t\tvariant: 'transparent',\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'text-dark-teal-100',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'transparent',\n\t\t\t\tdisabled: false,\n\t\t\t\tloading: false,\n\t\t\t\tclass: 'hover:bg-dark-teal active:text-dark-teal-100/60',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'transparent',\n\t\t\t\tdisabled: true,\n\t\t\t\tclass: 'text-dark-teal-100/60',\n\t\t\t},\n\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary', 'transparent'],\n\t\t\t\tsize: ['base', 'sm'],\n\t\t\t\ticonOnly: false,\n\t\t\t\tclass: 'px-2',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary', 'transparent'],\n\t\t\t\tsize: 'lg',\n\t\t\t\ticonOnly: false,\n\t\t\t\tclass: 'px-3',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'dropdown',\n\t\t\t\ticonOnly: false,\n\t\t\t\tclass: 'p-2',\n\t\t\t},\n\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary', 'transparent', 'text'],\n\t\t\t\ticonOnly: false,\n\t\t\t\tclass: 'py-1',\n\t\t\t},\n\n\t\t\t{\n\t\t\t\tsize: 'sm',\n\t\t\t\ticonOnly: true,\n\t\t\t\tclass: 'w-6',\n\t\t\t},\n\t\t\t{\n\t\t\t\tsize: 'base',\n\t\t\t\ticonOnly: true,\n\t\t\t\tclass: 'w-8',\n\t\t\t},\n\t\t\t{\n\t\t\t\tsize: 'lg',\n\t\t\t\ticonOnly: true,\n\t\t\t\tclass: 'w-10',\n\t\t\t},\n\t\t],\n\t}\n);\n\nconst icon = cva([], {\n\tvariants: {\n\t\tsize: {\n\t\t\tsm: 'text-sm',\n\t\t\tbase: 'text-base',\n\t\t\tlg: 'text-base',\n\t\t},\n\t},\n});\n\n@Component({\n\ttag: 'p-button',\n\tstyleUrl: 'button.component.scss',\n})\nexport class Button {\n\t/**\n\t * The type of the button\n\t */\n\t@Prop() as: 'a' | 'button' = 'button';\n\n\t/**\n\t * The variant of the button\n\t */\n\t@Prop() variant:\n\t\t| 'primary'\n\t\t| 'secondary'\n\t\t| 'transparent'\n\t\t| 'text'\n\t\t| 'dropdown' = 'primary';\n\n\t/**\n\t * Wether to force an active state\n\t */\n\t@Prop() active: boolean = false;\n\n\t/**\n\t * Wether the text variant has underline\n\t */\n\t@Prop() underline: boolean = true;\n\n\t/**\n\t * Href in case of \"text\" version\n\t */\n\t@Prop() href: string;\n\n\t/**\n\t * Target in case of \"text\" version\n\t */\n\t@Prop() target: string;\n\n\t/**\n\t * The size of the button\n\t */\n\t@Prop() size: 'sm' | 'base' | 'lg' = 'base';\n\n\t/**\n\t * The type of the button\n\t */\n\t@Prop() type: 'button' | 'submit' = 'button';\n\n\t/**\n\t * Wether to show a loader or not\n\t */\n\t@Prop() loading: boolean = false;\n\n\t/**\n\t * Wether to show a chevron or not\n\t */\n\t@Prop() chevron: boolean | 'up' | 'down' = false;\n\n\t/**\n\t * Chevron position\n\t */\n\t@Prop() chevronPosition: 'start' | 'end' = 'end';\n\n\t/**\n\t * Wether the button is disabled\n\t */\n\t@Prop() disabled: boolean = false;\n\n\t/**\n\t * Icon to show on the button\n\t */\n\t@Prop() icon: IconVariant;\n\n\t/**\n\t * Wether the button is icon only\n\t */\n\t@Prop() iconOnly: boolean = false;\n\n\t/**\n\t * Icon position\n\t */\n\t@Prop() iconPosition: 'start' | 'end' = 'end';\n\n\t/**\n\t * Icon flip\n\t */\n\t@Prop() iconFlip: IconFlipOptions;\n\n\t/**\n\t * Icon rotate\n\t */\n\t@Prop() iconRotate: RotateOptions;\n\n\t/**\n\t * Wether the button should inherit text styles\n\t */\n\t@Prop() inheritText: boolean = false;\n\n\t/**\n\t * Position of the button in the button group, mostly un-used if not in a group\n\t */\n\t@Prop() buttonGroupPosition: 'start' | 'center' | 'end' | 'none' = 'none';\n\n\t/**\n\t * Button click event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tonClick: EventEmitter<MouseEvent>;\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\trender() {\n\t\tlet loaderColor: 'white' | 'storm' | 'indigo' = 'white';\n\t\tswitch (this.variant) {\n\t\t\tcase 'secondary':\n\t\t\t\tloaderColor = 'storm';\n\t\t\t\tbreak;\n\t\t\tcase 'text':\n\t\t\t\tloaderColor = 'indigo';\n\t\t\t\tbreak;\n\t\t}\n\n\t\tconst VariableTag =\n\t\t\tthis.variant === 'text' || this.href?.length || this.as === 'a'\n\t\t\t\t? 'a'\n\t\t\t\t: 'button';\n\n\t\tconst active = this.active || this._el.classList.contains('active');\n\n\t\treturn (\n\t\t\t<Host class='p-button block'>\n\t\t\t\t<VariableTag\n\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\thref={this.href}\n\t\t\t\t\ttype={this.variant !== 'text' ? this.type : undefined}\n\t\t\t\t\ttarget={this.target}\n\t\t\t\t\tclass={button({\n\t\t\t\t\t\tvariant: this.variant,\n\t\t\t\t\t\tsize: this.size,\n\t\t\t\t\t\tunderline: this.underline,\n\t\t\t\t\t\tloading: this.loading,\n\t\t\t\t\t\tdisabled: this.disabled,\n\t\t\t\t\t\tbuttonGroupPosition: this.buttonGroupPosition,\n\t\t\t\t\t\ticonOnly: this.iconOnly,\n\t\t\t\t\t\tactive,\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t{this.chevron && this.chevronPosition === 'start' && (\n\t\t\t\t\t\t<p-icon\n\t\t\t\t\t\t\tvariant='caret'\n\t\t\t\t\t\t\trotate={this.chevron === 'up' ? 180 : 0}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{this.icon &&\n\t\t\t\t\t\tthis.iconPosition === 'start' &&\n\t\t\t\t\t\t!(this.iconOnly && this.loading) &&\n\t\t\t\t\t\tthis._getIcon()}\n\n\t\t\t\t\t<slot />\n\n\t\t\t\t\t{this.icon &&\n\t\t\t\t\t\tthis.iconPosition === 'end' &&\n\t\t\t\t\t\t!this.loading &&\n\t\t\t\t\t\t!this.chevron &&\n\t\t\t\t\t\tthis._getIcon()}\n\n\t\t\t\t\t{this.chevron && !this.loading && this.chevronPosition === 'end' && (\n\t\t\t\t\t\t<p-icon\n\t\t\t\t\t\t\tvariant='caret'\n\t\t\t\t\t\t\trotate={this.chevron === 'up' ? 180 : 0}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{this.loading && <p-loader color={loaderColor} />}\n\t\t\t\t</VariableTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@Listen('click', { capture: true })\n\thandleClick(ev: MouseEvent) {\n\t\tif (this.loading || this.disabled) {\n\t\t\tev.preventDefault();\n\t\t\treturn;\n\t\t}\n\n\t\tthis.onClick.emit(ev);\n\t}\n\n\tprivate _getIcon() {\n\t\tif (!this.icon) {\n\t\t\treturn;\n\t\t}\n\n\t\treturn (\n\t\t\t<p-icon\n\t\t\t\tclass={icon({\n\t\t\t\t\tsize: this.size,\n\t\t\t\t})}\n\t\t\t\tvariant={this.icon}\n\t\t\t\tflip={this.iconFlip}\n\t\t\t\trotate={this.iconRotate}\n\t\t\t/>\n\t\t);\n\t}\n}\n"],"version":3}
|
|
@@ -52,7 +52,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
|
|
|
52
52
|
strategy: this.strategy,
|
|
53
53
|
}), role: 'popover', maxWidth: !this.calculateWidth && this.applyMaxWidth, fullWidth: this.applyFullWidth && !this.applyMaxWidth, allowOverflow: this.allowOverflow, ref: el => this._load(el), "data-placement": this.placement, "data-strategy": this.strategy, onClick: () => this._containerClickHandler(), scrollable: this.scrollable }, h("slot", { name: 'items' }))));
|
|
54
54
|
}
|
|
55
|
-
_checkButton() {
|
|
55
|
+
_checkButton(active = false) {
|
|
56
56
|
if (!this.applyChevron) {
|
|
57
57
|
return;
|
|
58
58
|
}
|
|
@@ -64,6 +64,8 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
|
|
|
64
64
|
: this.placement.indexOf('top') >= 0
|
|
65
65
|
? 'up'
|
|
66
66
|
: 'down';
|
|
67
|
+
button.disabled = this.disableTriggerClick;
|
|
68
|
+
button.active = active;
|
|
67
69
|
}
|
|
68
70
|
}
|
|
69
71
|
onShowChange(show) {
|
|
@@ -121,6 +123,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
|
|
|
121
123
|
this._cleanup = autoUpdate(this._el, this._menu, () => this._update());
|
|
122
124
|
this._menu.setAttribute('data-show', '');
|
|
123
125
|
this.isOpen.emit(true);
|
|
126
|
+
this._checkButton(true);
|
|
124
127
|
}
|
|
125
128
|
_hide() {
|
|
126
129
|
if (!this._loaded || this.show) {
|
|
@@ -133,6 +136,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
|
|
|
133
136
|
// Hide the popover
|
|
134
137
|
this._menu.removeAttribute('data-show');
|
|
135
138
|
this.isOpen.emit(false);
|
|
139
|
+
this._checkButton(false);
|
|
136
140
|
}
|
|
137
141
|
_update() {
|
|
138
142
|
if (!this._menu) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"dropdown.component.js","mappings":"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","names":[],"sources":["src/components/molecules/dropdown/dropdown.component.scss?tag=p-dropdown","src/components/molecules/dropdown/dropdown.component.tsx"],"sourcesContent":["p-dropdown {\n\tp-dropdown-menu-container {\n\t\t@apply hidden;\n\n\t\t&[data-show] {\n\t\t\t@apply flex;\n\t\t}\n\t}\n}\n","import {\n\tautoUpdate,\n\tcomputePosition,\n\tflip,\n\toffset,\n\tPlacement,\n\tshift,\n\tStrategy,\n} from '@floating-ui/dom';\nimport {\n\tComponent,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tListen,\n\tProp,\n\tWatch,\n} from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { childOf } from '../../../utils/child-of';\n\nconst dropdownContainer = cva(['z-dropdown'], {\n\tvariants: {\n\t\tstrategy: {\n\t\t\tabsolute: 'absolute',\n\t\t\tfixed: 'fixed',\n\t\t},\n\t},\n});\n\n@Component({\n\ttag: 'p-dropdown',\n\tstyleUrl: 'dropdown.component.scss',\n})\nexport class Dropdown {\n\t/**\n\t * The content of the dropdown menu\n\t */\n\t@Prop({ reflect: true }) placement: Placement = 'bottom-start';\n\n\t/**\n\t * The offset of the dropdown menu\n\t */\n\t@Prop() offset: number = 8;\n\n\t/**\n\t * The strategy of the dropdown placement\n\t */\n\t@Prop() strategy: Strategy = 'absolute';\n\n\t/**\n\t * Wether to show the dropdown menu\n\t */\n\t@Prop() show: boolean = false;\n\n\t/**\n\t * Wether to automatically calculate the width of the menu based on the trigger\n\t */\n\t@Prop() calculateWidth: boolean = false;\n\n\t/**\n\t * Wether to apply the max width\n\t */\n\t@Prop() applyMaxWidth: boolean = true;\n\n\t/**\n\t * Wether to apply the full width\n\t */\n\t@Prop() applyFullWidth: boolean = true;\n\n\t/**\n\t * Wether to allow overflow in the container\n\t */\n\t@Prop() allowOverflow: boolean = false;\n\n\t/**\n\t * Wether the dropdown container should be scrollable when the threshold is met.\n\t */\n\t@Prop() scrollable: boolean | 'default' | 'large' = false;\n\n\t/**\n\t * Wether to automatically close the dropdown menu after clicking inside\n\t */\n\t@Prop() insideClick: boolean = false;\n\n\t/**\n\t * Wether to automatically close the dropdown menu after clicking inside\n\t */\n\t@Prop() disableTriggerClick: boolean = false;\n\n\t/**\n\t * Wether to apply chevron automatically\n\t */\n\t@Prop() applyChevron: boolean = true;\n\n\t/**\n\t * Chevron position\n\t */\n\t@Prop() chevronPosition: 'start' | 'end' = 'end';\n\n\t/**\n\t * Chevron direction\n\t */\n\t@Prop() chevronDirection: 'up' | 'down';\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\t/**\n\t * Open change event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tisOpen: EventEmitter<boolean>;\n\n\tprivate _loaded = false;\n\tprivate _trigger: HTMLElement;\n\tprivate _menu: HTMLElement;\n\tprivate _cleanup: () => void;\n\n\tcomponentShouldUpdate() {\n\t\tthis._update();\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis._checkButton();\n\t}\n\n\tdisconnectedCallback() {\n\t\tif (this._cleanup) {\n\t\t\tthis._cleanup();\n\t\t\tthis._cleanup = null;\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class='p-dropdown relative w-inherit'>\n\t\t\t\t<div\n\t\t\t\t\tclass='relative w-inherit'\n\t\t\t\t\tref={ref => (this._trigger = ref)}\n\t\t\t\t\tonClick={() => this._triggerClickHandler()}\n\t\t\t\t>\n\t\t\t\t\t<slot name='trigger' />\n\t\t\t\t</div>\n\t\t\t\t<p-dropdown-menu-container\n\t\t\t\t\tclass={dropdownContainer({\n\t\t\t\t\t\tstrategy: this.strategy,\n\t\t\t\t\t})}\n\t\t\t\t\trole='popover'\n\t\t\t\t\tmaxWidth={!this.calculateWidth && this.applyMaxWidth}\n\t\t\t\t\tfullWidth={this.applyFullWidth && !this.applyMaxWidth}\n\t\t\t\t\tallowOverflow={this.allowOverflow}\n\t\t\t\t\tref={el => this._load(el)}\n\t\t\t\t\tdata-placement={this.placement}\n\t\t\t\t\tdata-strategy={this.strategy}\n\t\t\t\t\tonClick={() => this._containerClickHandler()}\n\t\t\t\t\tscrollable={this.scrollable}\n\t\t\t\t>\n\t\t\t\t\t<slot name='items' />\n\t\t\t\t</p-dropdown-menu-container>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate _checkButton() {\n\t\tif (!this.applyChevron) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst buttons = this._el.querySelectorAll<HTMLPButtonElement>('p-button');\n\t\tfor (let button of buttons) {\n\t\t\tbutton.chevronPosition = this.chevronPosition;\n\t\t\tbutton.chevron = this.chevronDirection\n\t\t\t\t? this.chevronDirection\n\t\t\t\t: this.placement.indexOf('top') >= 0\n\t\t\t\t? 'up'\n\t\t\t\t: 'down';\n\t\t}\n\t}\n\n\t@Watch('show')\n\tprotected onShowChange(show) {\n\t\tif (!this._loaded) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!show) {\n\t\t\tthis._hide();\n\t\t\treturn;\n\t\t}\n\n\t\tthis._show();\n\t}\n\n\t@Listen('click', { target: 'document', capture: true })\n\tprotected documentClickHandler({ target }) {\n\t\tif (!this._menu.hasAttribute('data-show') || childOf(target, this._el)) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._hide();\n\t}\n\n\tprivate _containerClickHandler() {\n\t\tif (this.insideClick) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._menu.hasAttribute('data-show')) {\n\t\t\tthis._hide();\n\t\t}\n\t}\n\n\tprivate _triggerClickHandler() {\n\t\tif (this.disableTriggerClick) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._menu.hasAttribute('data-show')) {\n\t\t\tthis._hide();\n\t\t\treturn;\n\t\t}\n\n\t\tthis._show();\n\t}\n\n\tprivate _load(popover: HTMLElement) {\n\t\tthis._menu = popover;\n\t\tif (popover) {\n\t\t\tthis._update();\n\t\t\tthis._loaded = true;\n\n\t\t\tif (this.show) {\n\t\t\t\tsetTimeout(() => this._show(), 100);\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate _show() {\n\t\tif (!this._loaded) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Make the popover visible\n\t\tif (this.calculateWidth) {\n\t\t\tthis._menu.style.width = `${this._trigger.clientWidth}px`;\n\t\t}\n\n\t\tthis._cleanup = autoUpdate(this._el, this._menu, () => this._update());\n\n\t\tthis._menu.setAttribute('data-show', '');\n\t\tthis.isOpen.emit(true);\n\t}\n\n\tprivate _hide() {\n\t\tif (!this._loaded || this.show) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._cleanup) {\n\t\t\tthis._cleanup();\n\t\t\tthis._cleanup = null;\n\t\t}\n\n\t\t// Hide the popover\n\t\tthis._menu.removeAttribute('data-show');\n\t\tthis.isOpen.emit(false);\n\t}\n\n\tprivate _update() {\n\t\tif (!this._menu) {\n\t\t\treturn;\n\t\t}\n\n\t\tcomputePosition(this._el, this._menu, {\n\t\t\tplacement: this.placement,\n\t\t\tstrategy: this.strategy,\n\t\t\tmiddleware: [offset(this.offset), flip(), shift()],\n\t\t}).then(({ x, y, placement }) => {\n\t\t\tthis._menu.dataset.placement = placement;\n\t\t\tObject.assign(this._menu.style, {\n\t\t\t\ttop: `${y}px`,\n\t\t\t\tleft: `${x}px`,\n\t\t\t});\n\t\t});\n\t}\n}\n"],"version":3}
|
|
1
|
+
{"file":"dropdown.component.js","mappings":"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","names":[],"sources":["src/components/molecules/dropdown/dropdown.component.scss?tag=p-dropdown","src/components/molecules/dropdown/dropdown.component.tsx"],"sourcesContent":["p-dropdown {\n\tp-dropdown-menu-container {\n\t\t@apply hidden;\n\n\t\t&[data-show] {\n\t\t\t@apply flex;\n\t\t}\n\t}\n}\n","import {\n\tautoUpdate,\n\tcomputePosition,\n\tflip,\n\toffset,\n\tPlacement,\n\tshift,\n\tStrategy,\n} from '@floating-ui/dom';\nimport {\n\tComponent,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tListen,\n\tProp,\n\tWatch,\n} from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { childOf } from '../../../utils/child-of';\n\nconst dropdownContainer = cva(['z-dropdown'], {\n\tvariants: {\n\t\tstrategy: {\n\t\t\tabsolute: 'absolute',\n\t\t\tfixed: 'fixed',\n\t\t},\n\t},\n});\n\n@Component({\n\ttag: 'p-dropdown',\n\tstyleUrl: 'dropdown.component.scss',\n})\nexport class Dropdown {\n\t/**\n\t * The content of the dropdown menu\n\t */\n\t@Prop({ reflect: true }) placement: Placement = 'bottom-start';\n\n\t/**\n\t * The offset of the dropdown menu\n\t */\n\t@Prop() offset: number = 8;\n\n\t/**\n\t * The strategy of the dropdown placement\n\t */\n\t@Prop() strategy: Strategy = 'absolute';\n\n\t/**\n\t * Wether to show the dropdown menu\n\t */\n\t@Prop() show: boolean = false;\n\n\t/**\n\t * Wether to automatically calculate the width of the menu based on the trigger\n\t */\n\t@Prop() calculateWidth: boolean = false;\n\n\t/**\n\t * Wether to apply the max width\n\t */\n\t@Prop() applyMaxWidth: boolean = true;\n\n\t/**\n\t * Wether to apply the full width\n\t */\n\t@Prop() applyFullWidth: boolean = true;\n\n\t/**\n\t * Wether to allow overflow in the container\n\t */\n\t@Prop() allowOverflow: boolean = false;\n\n\t/**\n\t * Wether the dropdown container should be scrollable when the threshold is met.\n\t */\n\t@Prop() scrollable: boolean | 'default' | 'large' = false;\n\n\t/**\n\t * Wether to automatically close the dropdown menu after clicking inside\n\t */\n\t@Prop() insideClick: boolean = false;\n\n\t/**\n\t * Wether to automatically close the dropdown menu after clicking inside\n\t */\n\t@Prop() disableTriggerClick: boolean = false;\n\n\t/**\n\t * Wether to apply chevron automatically\n\t */\n\t@Prop() applyChevron: boolean = true;\n\n\t/**\n\t * Chevron position\n\t */\n\t@Prop() chevronPosition: 'start' | 'end' = 'end';\n\n\t/**\n\t * Chevron direction\n\t */\n\t@Prop() chevronDirection: 'up' | 'down';\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\t/**\n\t * Open change event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tisOpen: EventEmitter<boolean>;\n\n\tprivate _loaded = false;\n\tprivate _trigger: HTMLElement;\n\tprivate _menu: HTMLElement;\n\tprivate _cleanup: () => void;\n\n\tcomponentShouldUpdate() {\n\t\tthis._update();\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis._checkButton();\n\t}\n\n\tdisconnectedCallback() {\n\t\tif (this._cleanup) {\n\t\t\tthis._cleanup();\n\t\t\tthis._cleanup = null;\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class='p-dropdown relative w-inherit'>\n\t\t\t\t<div\n\t\t\t\t\tclass='relative w-inherit'\n\t\t\t\t\tref={ref => (this._trigger = ref)}\n\t\t\t\t\tonClick={() => this._triggerClickHandler()}\n\t\t\t\t>\n\t\t\t\t\t<slot name='trigger' />\n\t\t\t\t</div>\n\t\t\t\t<p-dropdown-menu-container\n\t\t\t\t\tclass={dropdownContainer({\n\t\t\t\t\t\tstrategy: this.strategy,\n\t\t\t\t\t})}\n\t\t\t\t\trole='popover'\n\t\t\t\t\tmaxWidth={!this.calculateWidth && this.applyMaxWidth}\n\t\t\t\t\tfullWidth={this.applyFullWidth && !this.applyMaxWidth}\n\t\t\t\t\tallowOverflow={this.allowOverflow}\n\t\t\t\t\tref={el => this._load(el)}\n\t\t\t\t\tdata-placement={this.placement}\n\t\t\t\t\tdata-strategy={this.strategy}\n\t\t\t\t\tonClick={() => this._containerClickHandler()}\n\t\t\t\t\tscrollable={this.scrollable}\n\t\t\t\t>\n\t\t\t\t\t<slot name='items' />\n\t\t\t\t</p-dropdown-menu-container>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate _checkButton(active: boolean = false) {\n\t\tif (!this.applyChevron) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst buttons = this._el.querySelectorAll<HTMLPButtonElement>('p-button');\n\t\tfor (let button of buttons) {\n\t\t\tbutton.chevronPosition = this.chevronPosition;\n\t\t\tbutton.chevron = this.chevronDirection\n\t\t\t\t? this.chevronDirection\n\t\t\t\t: this.placement.indexOf('top') >= 0\n\t\t\t\t? 'up'\n\t\t\t\t: 'down';\n\t\t\tbutton.disabled = this.disableTriggerClick;\n\t\t\tbutton.active = active;\n\t\t}\n\t}\n\n\t@Watch('show')\n\tprotected onShowChange(show) {\n\t\tif (!this._loaded) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!show) {\n\t\t\tthis._hide();\n\t\t\treturn;\n\t\t}\n\n\t\tthis._show();\n\t}\n\n\t@Listen('click', { target: 'document', capture: true })\n\tprotected documentClickHandler({ target }) {\n\t\tif (!this._menu.hasAttribute('data-show') || childOf(target, this._el)) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._hide();\n\t}\n\n\tprivate _containerClickHandler() {\n\t\tif (this.insideClick) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._menu.hasAttribute('data-show')) {\n\t\t\tthis._hide();\n\t\t}\n\t}\n\n\tprivate _triggerClickHandler() {\n\t\tif (this.disableTriggerClick) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._menu.hasAttribute('data-show')) {\n\t\t\tthis._hide();\n\t\t\treturn;\n\t\t}\n\n\t\tthis._show();\n\t}\n\n\tprivate _load(popover: HTMLElement) {\n\t\tthis._menu = popover;\n\t\tif (popover) {\n\t\t\tthis._update();\n\t\t\tthis._loaded = true;\n\n\t\t\tif (this.show) {\n\t\t\t\tsetTimeout(() => this._show(), 100);\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate _show() {\n\t\tif (!this._loaded) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Make the popover visible\n\t\tif (this.calculateWidth) {\n\t\t\tthis._menu.style.width = `${this._trigger.clientWidth}px`;\n\t\t}\n\n\t\tthis._cleanup = autoUpdate(this._el, this._menu, () => this._update());\n\n\t\tthis._menu.setAttribute('data-show', '');\n\t\tthis.isOpen.emit(true);\n\t\tthis._checkButton(true);\n\t}\n\n\tprivate _hide() {\n\t\tif (!this._loaded || this.show) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._cleanup) {\n\t\t\tthis._cleanup();\n\t\t\tthis._cleanup = null;\n\t\t}\n\n\t\t// Hide the popover\n\t\tthis._menu.removeAttribute('data-show');\n\t\tthis.isOpen.emit(false);\n\t\tthis._checkButton(false);\n\t}\n\n\tprivate _update() {\n\t\tif (!this._menu) {\n\t\t\treturn;\n\t\t}\n\n\t\tcomputePosition(this._el, this._menu, {\n\t\t\tplacement: this.placement,\n\t\t\tstrategy: this.strategy,\n\t\t\tmiddleware: [offset(this.offset), flip(), shift()],\n\t\t}).then(({ x, y, placement }) => {\n\t\t\tthis._menu.dataset.placement = placement;\n\t\t\tObject.assign(this._menu.style, {\n\t\t\t\ttop: `${y}px`,\n\t\t\t\tleft: `${x}px`,\n\t\t\t});\n\t\t});\n\t}\n}\n"],"version":3}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"icon.component.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,mgDAAmgD;;ACQ5hD,MAAM,IAAI,GAAG,GAAG,CAAC,CAAC,aAAa,CAAC,EAAE;EACjC,QAAQ,EAAE;IACT,IAAI,EAAE;MACL,IAAI,EAAE,IAAI;MACV,UAAU,EAAE,cAAc;MAC1B,QAAQ,EAAE,cAAc;KACxB;IACD,IAAI,EAAE;MACL,IAAI,EAAE,WAAW;MACjB,GAAG,EAAE,UAAU;MACf,EAAE,EAAE,SAAS;MACb,EAAE,EAAE,SAAS;MACb,IAAI,EAAE,WAAW;MACjB,EAAE,EAAE,SAAS;MACb,EAAE,EAAE,SAAS;MACb,KAAK,EAAE,UAAU;MACjB,KAAK,EAAE,UAAU;MACjB,KAAK,EAAE,UAAU;KACjB;IACD,SAAS,EAAE;MACV,IAAI,EAAE,4BAA4B;MAClC,KAAK,EAAE,IAAI;KACX;GACD;CACD,CAAC,CAAC;MAOU,IAAI;;;;;gBASgB,MAAM;kBAKb,CAAC;gBAKM,MAAM;;EAEtC,MAAM;IACL,MAAM,GAAG,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAEhC,QACC,EAAC,IAAI,IACJ,KAAK,EAAE,IAAI,CAAC;QACX,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,SAAS,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC;OACrE,CAAC,EACF,KAAK,EAAE;QACN,aAAa,EAAE,GAAG,IAAI,CAAC,MAAM,KAAK;OAClC,EACD,SAAS,EAAE,GAAG,GACP,EACP;GACF;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/icon/icon.component.scss?tag=p-icon","src/components/atoms/icon/icon.component.tsx"],"sourcesContent":[":host {\n\t-webkit-transform-origin: 50% 51%;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { TextSizeOptions } from '../../../types/tailwind';\nimport { icons } from '../../../utils/icons';\n\nexport type IconVariant = keyof typeof icons;\nexport type IconFlipOptions = 'none' | 'horizontal' | 'vertical';\n\nconst icon = cva(['p-icon flex'], {\n\tvariants: {\n\t\tflip: {\n\t\t\tnone: null,\n\t\t\thorizontal: 'scale-x-flip',\n\t\t\tvertical: 'scale-y-flip',\n\t\t},\n\t\tsize: {\n\t\t\tauto: 'text-auto',\n\t\t\txxs: 'text-xxs',\n\t\t\txs: 'text-xs',\n\t\t\tsm: 'text-sm',\n\t\t\tbase: 'text-base',\n\t\t\tlg: 'text-lg',\n\t\t\txl: 'text-xl',\n\t\t\t'2xl': 'text-2xl',\n\t\t\t'3xl': 'text-3xl',\n\t\t\t'4xl': 'text-4xl',\n\t\t},\n\t\ttransform: {\n\t\t\ttrue: 'transform-gpu scale-[0.99]',\n\t\t\tfalse: null,\n\t\t},\n\t},\n});\n\n@Component({\n\ttag: 'p-icon',\n\tstyleUrl: 'icon.component.scss',\n\t// shadow: true,\n})\nexport class Icon {\n\t/**\n\t * The icon the be displayed\n\t */\n\t@Prop() variant!: IconVariant;\n\n\t/**\n\t * The size of the icon, using tailwind sizes\n\t */\n\t@Prop() size: TextSizeOptions = '
|
|
1
|
+
{"file":"icon.component.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,mgDAAmgD;;ACQ5hD,MAAM,IAAI,GAAG,GAAG,CAAC,CAAC,aAAa,CAAC,EAAE;EACjC,QAAQ,EAAE;IACT,IAAI,EAAE;MACL,IAAI,EAAE,IAAI;MACV,UAAU,EAAE,cAAc;MAC1B,QAAQ,EAAE,cAAc;KACxB;IACD,IAAI,EAAE;MACL,IAAI,EAAE,WAAW;MACjB,GAAG,EAAE,UAAU;MACf,EAAE,EAAE,SAAS;MACb,EAAE,EAAE,SAAS;MACb,IAAI,EAAE,WAAW;MACjB,EAAE,EAAE,SAAS;MACb,EAAE,EAAE,SAAS;MACb,KAAK,EAAE,UAAU;MACjB,KAAK,EAAE,UAAU;MACjB,KAAK,EAAE,UAAU;KACjB;IACD,SAAS,EAAE;MACV,IAAI,EAAE,4BAA4B;MAClC,KAAK,EAAE,IAAI;KACX;GACD;CACD,CAAC,CAAC;MAOU,IAAI;;;;;gBASgB,MAAM;kBAKb,CAAC;gBAKM,MAAM;;EAEtC,MAAM;IACL,MAAM,GAAG,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAEhC,QACC,EAAC,IAAI,IACJ,KAAK,EAAE,IAAI,CAAC;QACX,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,SAAS,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC;OACrE,CAAC,EACF,KAAK,EAAE;QACN,aAAa,EAAE,GAAG,IAAI,CAAC,MAAM,KAAK;OAClC,EACD,SAAS,EAAE,GAAG,GACP,EACP;GACF;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/icon/icon.component.scss?tag=p-icon","src/components/atoms/icon/icon.component.tsx"],"sourcesContent":[":host {\n\t-webkit-transform-origin: 50% 51%;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { TextSizeOptions } from '../../../types/tailwind';\nimport { icons } from '../../../utils/icons';\n\nexport type IconVariant = keyof typeof icons;\nexport type IconFlipOptions = 'none' | 'horizontal' | 'vertical';\n\nconst icon = cva(['p-icon flex'], {\n\tvariants: {\n\t\tflip: {\n\t\t\tnone: null,\n\t\t\thorizontal: 'scale-x-flip',\n\t\t\tvertical: 'scale-y-flip',\n\t\t},\n\t\tsize: {\n\t\t\tauto: 'text-auto',\n\t\t\txxs: 'text-xxs',\n\t\t\txs: 'text-xs',\n\t\t\tsm: 'text-sm',\n\t\t\tbase: 'text-base',\n\t\t\tlg: 'text-lg',\n\t\t\txl: 'text-xl',\n\t\t\t'2xl': 'text-2xl',\n\t\t\t'3xl': 'text-3xl',\n\t\t\t'4xl': 'text-4xl',\n\t\t},\n\t\ttransform: {\n\t\t\ttrue: 'transform-gpu scale-[0.99]',\n\t\t\tfalse: null,\n\t\t},\n\t},\n});\n\n@Component({\n\ttag: 'p-icon',\n\tstyleUrl: 'icon.component.scss',\n\t// shadow: true,\n})\nexport class Icon {\n\t/**\n\t * The icon the be displayed\n\t */\n\t@Prop() variant!: IconVariant;\n\n\t/**\n\t * The size of the icon, using tailwind sizes\n\t */\n\t@Prop() size: TextSizeOptions = 'base';\n\n\t/**\n\t * Wether to rotate the icon x degrees\n\t */\n\t@Prop() rotate: number = 0;\n\n\t/**\n\t * Wether to flip the icon horizontally or vertically\n\t */\n\t@Prop() flip: IconFlipOptions = 'none';\n\n\trender() {\n\t\tconst svg = icons[this.variant];\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={icon({\n\t\t\t\t\tflip: this.flip,\n\t\t\t\t\tsize: this.size,\n\t\t\t\t\ttransform: this.flip !== 'none' || this.rotate > 0 || this.rotate < 0,\n\t\t\t\t})}\n\t\t\t\tstyle={{\n\t\t\t\t\t'--tw-rotate': `${this.rotate}deg`,\n\t\t\t\t}}\n\t\t\t\tinnerHTML={svg}\n\t\t\t></Host>\n\t\t);\n\t}\n}\n"],"version":3}
|
|
@@ -46,11 +46,13 @@ const NavigationItem = /*@__PURE__*/ proxyCustomElement(class NavigationItem ext
|
|
|
46
46
|
}
|
|
47
47
|
render() {
|
|
48
48
|
const TagType = this.as;
|
|
49
|
+
const active = this.active || this._el.classList.contains('active');
|
|
49
50
|
return (h(Host, { class: 'p-navigation-item inline-block' }, h(TagType, { class: navigationItem({
|
|
50
|
-
active: this.active,
|
|
51
51
|
icon: !!this.icon,
|
|
52
|
-
|
|
52
|
+
active,
|
|
53
|
+
}), href: this.href, target: this.target }, h("div", { class: navigationItemIconContainer({ active }) }, h("p-icon", { variant: this.icon })), h("span", { class: this.counter && 'has-counter' }, h("slot", null)), !!this.counter && this.counter !== '0' && (h("p-badge", null, this.counter)))));
|
|
53
54
|
}
|
|
55
|
+
get _el() { return this; }
|
|
54
56
|
static get style() { return navigationItemComponentCss; }
|
|
55
57
|
}, [4, "p-navigation-item", {
|
|
56
58
|
"icon": [1],
|