@usecapsule/core-components 2.0.0 → 2.0.1-dev.dropdown
Sign up to get free protection for your applications and to get access to all the features.
- package/css/capsule-core.css +12 -0
- package/css/capsule-core.css.map +1 -1
- package/dist/capsule/capsule.esm.js +1 -1
- package/dist/capsule/capsule.esm.js.map +1 -1
- package/dist/capsule/index.esm.js +1 -1
- package/dist/capsule/index.esm.js.map +1 -1
- package/dist/capsule/{p-68c73705.entry.js → p-0cab90fa.entry.js} +2 -2
- package/dist/capsule/{p-91412151.entry.js → p-193ac141.entry.js} +2 -2
- package/dist/capsule/p-c7be2546.entry.js +29 -0
- package/dist/capsule/p-c7be2546.entry.js.map +1 -0
- package/dist/capsule/p-cb8dc0a4.entry.js +2 -0
- package/dist/cjs/capsule.cjs.js +1 -1
- package/dist/cjs/{cpsl-alert_17.cjs.entry.js → cpsl-alert_18.cjs.entry.js} +150 -37
- package/dist/cjs/cpsl-alert_18.cjs.entry.js.map +1 -0
- package/dist/cjs/cpsl-grid.cjs.entry.js +2 -2
- package/dist/cjs/cpsl-info-box.cjs.entry.js +1 -1
- package/dist/cjs/cpsl-row.cjs.entry.js +1 -1
- package/dist/cjs/index-3fccb5b4.js +2 -2
- package/dist/cjs/index.cjs.js +28 -8
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/assets/icons/chevron-up.svg +3 -0
- package/dist/collection/assets/icons/index.js +2 -1
- package/dist/collection/assets/icons/index.js.map +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/cpsl-alert/cpsl-alert.js +1 -1
- package/dist/collection/components/cpsl-dropdown/cpsl-dropdown.css +88 -0
- package/dist/collection/components/cpsl-dropdown/cpsl-dropdown.js +113 -0
- package/dist/collection/components/cpsl-dropdown/cpsl-dropdown.js.map +1 -0
- package/dist/collection/components/cpsl-dropdown/test/cpsl-dropdown.e2e.js +29 -0
- package/dist/collection/components/cpsl-dropdown/test/cpsl-dropdown.e2e.js.map +1 -0
- package/dist/collection/components/cpsl-dropdown/test/cpsl-dropdown.spec.js +37 -0
- package/dist/collection/components/cpsl-dropdown/test/cpsl-dropdown.spec.js.map +1 -0
- package/dist/collection/components/cpsl-grid/cpsl-grid.js +2 -2
- package/dist/collection/components/cpsl-icon/cpsl-icon.js +2 -2
- package/dist/collection/components/cpsl-info-box/cpsl-info-box.js +1 -1
- package/dist/collection/components/cpsl-input/cpsl-input.css +3 -3
- package/dist/collection/components/cpsl-input/cpsl-input.js +2 -2
- package/dist/collection/components/cpsl-modal/cpsl-modal.js +27 -21
- package/dist/collection/components/cpsl-modal/cpsl-modal.js.map +1 -1
- package/dist/collection/components/cpsl-overlay/cpsl-overlay.js +1 -1
- package/dist/collection/components/cpsl-pill/cpsl-pill.js +1 -1
- package/dist/collection/components/cpsl-qr-code/cpsl-qr-code.js +1 -1
- package/dist/collection/components/cpsl-row/cpsl-row.js +1 -1
- package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.js +3 -3
- package/dist/collection/components/cpsl-spinner/cpsl-spinner.js +2 -2
- package/dist/collection/components/cpsl-tab/cpsl-tab.js +1 -1
- package/dist/collection/components/cpsl-tabs/cpsl-tabs.js +1 -1
- package/dist/collection/components/cpsl-text/cpsl-text.css +101 -0
- package/dist/collection/components/cpsl-text/cpsl-text.js +110 -1
- package/dist/collection/components/cpsl-text/cpsl-text.js.map +1 -1
- package/dist/collection/components/cpsl-tile-button/cpsl-tile-button.js +2 -2
- package/dist/collection/index.js +1 -1
- package/dist/collection/index.js.map +1 -1
- package/dist/collection/interface.js.map +1 -1
- package/dist/collection/utils/theme/generateFont.js +25 -4
- package/dist/collection/utils/theme/generateFont.js.map +1 -1
- package/dist/collection/utils/theme/generateTheme.js +2 -3
- package/dist/collection/utils/theme/generateTheme.js.map +1 -1
- package/dist/esm/capsule.js +1 -1
- package/dist/esm/{cpsl-alert_17.entry.js → cpsl-alert_18.entry.js} +150 -38
- package/dist/esm/cpsl-alert_18.entry.js.map +1 -0
- package/dist/esm/cpsl-grid.entry.js +2 -2
- package/dist/esm/cpsl-info-box.entry.js +1 -1
- package/dist/esm/cpsl-row.entry.js +1 -1
- package/dist/esm/index-f00e090c.js +2 -2
- package/dist/esm/index.js +28 -8
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/assets/icons/index.d.ts +1 -0
- package/dist/types/components/cpsl-dropdown/cpsl-dropdown.d.ts +25 -0
- package/dist/types/components/cpsl-modal/cpsl-modal.d.ts +2 -0
- package/dist/types/components/cpsl-text/cpsl-text.d.ts +4 -0
- package/dist/types/components.d.ts +53 -0
- package/dist/types/index.d.ts +1 -1
- package/dist/types/interface.d.ts +15 -0
- package/dist/types/utils/theme/generateFont.d.ts +1 -1
- package/dist/types/utils/theme/generateTheme.d.ts +1 -2
- package/package.json +2 -3
- package/dist/capsule/p-202a85c9.entry.js +0 -29
- package/dist/capsule/p-202a85c9.entry.js.map +0 -1
- package/dist/capsule/p-f604b591.entry.js +0 -2
- package/dist/cjs/cpsl-alert_17.cjs.entry.js.map +0 -1
- package/dist/esm/cpsl-alert_17.entry.js.map +0 -1
- /package/dist/capsule/{p-68c73705.entry.js.map → p-0cab90fa.entry.js.map} +0 -0
- /package/dist/capsule/{p-91412151.entry.js.map → p-193ac141.entry.js.map} +0 -0
- /package/dist/capsule/{p-f604b591.entry.js.map → p-cb8dc0a4.entry.js.map} +0 -0
- /package/dist/types/Users/{taylorbosch → vinay}/Documents/GitHub/Capsule/component-library/core/.stencil/scripts/buildIconLibrary.d.ts +0 -0
@@ -145,6 +145,11 @@ const Check = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" strok
|
|
145
145
|
</svg>
|
146
146
|
`;
|
147
147
|
|
148
|
+
const ChevronUp = `<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
149
|
+
<path d="M13 7L7 0.999999L1 7" stroke="#525252" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
150
|
+
</svg>
|
151
|
+
`;
|
152
|
+
|
148
153
|
const Clock = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
|
149
154
|
<path d="M12 6V12L16 14M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
150
155
|
</svg>
|
@@ -614,7 +619,7 @@ const Youtube = `<svg width="24" height="24" viewBox="0 0 24 24" fill="currentCo
|
|
614
619
|
</svg>
|
615
620
|
`;
|
616
621
|
|
617
|
-
const Icons = { alertCircle: AlertCircle, angelListBrand: AngelListBrand, angelList: AngelList, appleBrand: AppleBrand, apple: Apple, arrowNarrow: ArrowNarrow, arrow: Arrow, backupKit: BackupKit, capsuleLogo: CapsuleLogo, capsuleRingsDark: CapsuleRingsDark, capsuleRings: CapsuleRings, capsule: Capsule, check: Check, clock: Clock, close: Close, clubhouseBrand: ClubhouseBrand, clubhouse: Clubhouse, copy: Copy, discordBrand: DiscordBrand, discord: Discord, downloadCloud: DownloadCloud, dribbbleBrand: DribbbleBrand, dribbble: Dribbble, eyeOff: EyeOff, eye: Eye, facebookBrand: FacebookBrand, facebook: Facebook, figmaBrand: FigmaBrand, figma: Figma, githubBrand: GithubBrand, github: Github, googleBrand: GoogleBrand, google: Google, helpCircle: HelpCircle, heroEmail: HeroEmail, heroLock: HeroLock, heroPasskey: HeroPasskey, heroPhone: HeroPhone, heroWallet: HeroWallet, infoCircle: InfoCircle, instagramBrand: InstagramBrand, instagram: Instagram, key: Key, linkedinBrand: LinkedinBrand, linkedin: Linkedin, mail: Mail, moreLoginOptions: MoreLoginOptions, phone: Phone, pintrestBrand: PintrestBrand, pintrest: Pintrest, plusCircle: PlusCircle, redditBrand: RedditBrand, reddit: Reddit, signalBrand: SignalBrand, signal: Signal, snapchatBrand: SnapchatBrand, snapchat: Snapchat, telegramBrand: TelegramBrand, telegram: Telegram, tikTokBrand: TikTokBrand, tikTok: TikTok, tumblrBrand: TumblrBrand, tumblr: Tumblr, twitterBrand: TwitterBrand, twitter: Twitter, wallet: Wallet, youtubeBrand: YoutubeBrand, youtube: Youtube, };
|
622
|
+
const Icons = { alertCircle: AlertCircle, angelListBrand: AngelListBrand, angelList: AngelList, appleBrand: AppleBrand, apple: Apple, arrowNarrow: ArrowNarrow, arrow: Arrow, backupKit: BackupKit, capsuleLogo: CapsuleLogo, capsuleRingsDark: CapsuleRingsDark, capsuleRings: CapsuleRings, capsule: Capsule, check: Check, chevronUp: ChevronUp, clock: Clock, close: Close, clubhouseBrand: ClubhouseBrand, clubhouse: Clubhouse, copy: Copy, discordBrand: DiscordBrand, discord: Discord, downloadCloud: DownloadCloud, dribbbleBrand: DribbbleBrand, dribbble: Dribbble, eyeOff: EyeOff, eye: Eye, facebookBrand: FacebookBrand, facebook: Facebook, figmaBrand: FigmaBrand, figma: Figma, githubBrand: GithubBrand, github: Github, googleBrand: GoogleBrand, google: Google, helpCircle: HelpCircle, heroEmail: HeroEmail, heroLock: HeroLock, heroPasskey: HeroPasskey, heroPhone: HeroPhone, heroWallet: HeroWallet, infoCircle: InfoCircle, instagramBrand: InstagramBrand, instagram: Instagram, key: Key, linkedinBrand: LinkedinBrand, linkedin: Linkedin, mail: Mail, moreLoginOptions: MoreLoginOptions, phone: Phone, pintrestBrand: PintrestBrand, pintrest: Pintrest, plusCircle: PlusCircle, redditBrand: RedditBrand, reddit: Reddit, signalBrand: SignalBrand, signal: Signal, snapchatBrand: SnapchatBrand, snapchat: Snapchat, telegramBrand: TelegramBrand, telegram: Telegram, tikTokBrand: TikTokBrand, tikTok: TikTok, tumblrBrand: TumblrBrand, tumblr: Tumblr, twitterBrand: TwitterBrand, twitter: Twitter, wallet: Wallet, youtubeBrand: YoutubeBrand, youtube: Youtube, };
|
618
623
|
|
619
624
|
const cpslAlertCss = ":host{--container-gap:8px;--container-padding-top:4px;--container-padding-bottom:4px;--container-padding-start:16px;--container-padding-end:16px;--container-font-size:clamp(12px, 0.75rem, 18px);--container-border-width:1px;--container-border-radius:var(--cpsl-border-radius-alert);display:inline-block;font-family:var(--cpsl-font-family, inherit)}:host(.error){--container-background-color:var(--cpsl-color-alert-surface-error);--container-border-color:var(--cpsl-color-alert-border-error);--container-color:var(--cpsl-color-text-error)}.alert-container{border-radius:var(--container-border-radius);-webkit-padding-start:var(--container-padding-start);padding-inline-start:var(--container-padding-start);-webkit-padding-end:var(--container-padding-end);padding-inline-end:var(--container-padding-end);padding-top:var(--container-padding-top);padding-bottom:var(--container-padding-bottom);font-size:var(--container-font-size);font-weight:500;display:flex;align-items:center;justify-content:center;gap:var(--container-gap);border-style:solid;border-width:var(--container-border-width);border-color:var(--container-border-color);background-color:var(--container-background-color);color:var(--container-color)}.icon{display:flex}";
|
620
625
|
const CpslAlertStyle0 = cpslAlertCss;
|
@@ -774,6 +779,58 @@ const CpslDivider = class {
|
|
774
779
|
};
|
775
780
|
CpslDivider.style = CpslDividerStyle0;
|
776
781
|
|
782
|
+
const cpslDropdownCss = ":host{display:block;position:relative;font-family:Arial, sans-serif}.input-container{position:relative;width:100%}::slotted(cpsl-dropdown){position:absolute;width:100%;top:100%;left:0;z-index:2}.dropdown-button{display:flex;width:100%;padding:0 4px;background:none;border:none;align-items:center;justify-content:space-between;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:inherit;color:inherit}.dropdown-button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1}.dropdown-button div{margin-left:8px;display:flex;align-items:center}.dropdown-options{display:none;position:absolute;list-style:none;padding:0;margin:0;border:1px solid #ccc;background:white;z-index:1000}.dropdown-options.open{display:block;border-radius:8px;border:1px solid #483e3e}.dropdown-options.open{display:block;margin-top:20px}.dropdown-options li{padding:6px;cursor:pointer;display:flex;align-items:center;border-bottom:1px solid #ccc}.dropdown-options li svg{width:24px;height:24px;margin-right:8px;padding:0 8px}.dropdown-value{margin-left:8px;color:#6c757d}";
|
783
|
+
const CpslDropdownStyle0 = cpslDropdownCss;
|
784
|
+
|
785
|
+
const CpslDropdown = class {
|
786
|
+
constructor(hostRef) {
|
787
|
+
registerInstance(this, hostRef);
|
788
|
+
this.toggleDropdown = () => {
|
789
|
+
this.isOpen = !this.isOpen;
|
790
|
+
};
|
791
|
+
this.selectItem = (item) => {
|
792
|
+
this.selectedItem = item;
|
793
|
+
this.toggleDropdown();
|
794
|
+
};
|
795
|
+
this.handleItemSelect = (item) => () => {
|
796
|
+
this.selectItem(item);
|
797
|
+
};
|
798
|
+
this.width = '100%';
|
799
|
+
this.isOpen = false;
|
800
|
+
this.selectedItem = undefined;
|
801
|
+
this.items = [];
|
802
|
+
}
|
803
|
+
handleOpenChange() {
|
804
|
+
if (this.isOpen) {
|
805
|
+
this.adjustPosition();
|
806
|
+
}
|
807
|
+
}
|
808
|
+
adjustPosition() {
|
809
|
+
var _a;
|
810
|
+
const dropdownOptions = this.el.shadowRoot.querySelector('.dropdown-options');
|
811
|
+
const hostRect = this.el.getBoundingClientRect();
|
812
|
+
const parentRect = (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
813
|
+
if (parentRect) {
|
814
|
+
this.width = `${parentRect.width}px`;
|
815
|
+
dropdownOptions.style.left = `${parentRect.left - hostRect.left}px`;
|
816
|
+
}
|
817
|
+
}
|
818
|
+
componentWillLoad() {
|
819
|
+
if (this.items.length > 0) {
|
820
|
+
this.selectedItem = this.items[0];
|
821
|
+
}
|
822
|
+
}
|
823
|
+
render() {
|
824
|
+
var _a, _b, _c;
|
825
|
+
return (h(Host, { key: '6882468bccd50b57e16ce09ca360392415c0b1ce', style: { width: this.width } }, h("button", { key: '0f34c3f861543fd6f2781adeb371f6dbbf4a7e7c', class: "dropdown-button", onClick: this.toggleDropdown }, `${((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.selectedLabel) || ((_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.label)} ${(_c = this.selectedItem) === null || _c === void 0 ? void 0 : _c.value}`, h("div", { key: '9d266062c49e3fce689eccf57229534043d975e8', innerHTML: Icons['chevronUp'] })), h("ul", { key: 'c82c76fae351883748e0094d218cfff8261b8ed8', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.items.map(item => h("li", { onClick: this.handleItemSelect(item) }, h("span", { innerHTML: item.icon }), item.label, " ", h("span", { class: "dropdown-value" }, item.value))))));
|
826
|
+
}
|
827
|
+
get el() { return getElement(this); }
|
828
|
+
static get watchers() { return {
|
829
|
+
"isOpen": ["handleOpenChange"]
|
830
|
+
}; }
|
831
|
+
};
|
832
|
+
CpslDropdown.style = CpslDropdownStyle0;
|
833
|
+
|
777
834
|
const cpslIconCss = ":host{display:block;--height:24px;--width:24px;--icon-color:var(--cpsl-color-text-primary);--icon-fill-color:var(--cpsl-color-text-primary);--icon-stroke-color:var(--cpsl-color-text-primary);width:var(--width);height:var(--height)}:host div{display:flex;width:var(--width);height:var(--height);color:var(--icon-color)}:host svg{width:var(--width);height:var(--height)}: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(--width);height:var(--height);object-fit:contain}";
|
778
835
|
const CpslIconStyle0 = cpslIconCss;
|
779
836
|
|
@@ -784,12 +841,12 @@ const CpslIcon = class {
|
|
784
841
|
this.icon = undefined;
|
785
842
|
}
|
786
843
|
render() {
|
787
|
-
return (h(Host, { key: '
|
844
|
+
return (h(Host, { key: '89f3081baf013558e965cc6682811d66dc2b188d', part: "icon", role: "img" }, !Boolean(this.icon) ? h("img", { src: this.src }) : h("div", { innerHTML: Icons[this.icon] })));
|
788
845
|
}
|
789
846
|
};
|
790
847
|
CpslIcon.style = CpslIconStyle0;
|
791
848
|
|
792
|
-
const cpslInputCss = ":host{--container-box-shadow:none;--container-box-shadow-color:var(--cpsl-color-alpha-black-16);--container-border-color:var(--cpsl-color-input-border-active);--container-border-error-color:var(--cpsl-color-input-border-error);--container-background-color:var(--cpsl-color-input-surface-default);--container-background-color-disabled:var(--cpsl-color-input-surface-disabled);--container-border-width:1px;--container-border-radius:var(--cpsl-border-radius-input);--container-padding-top:4px;--container-padding-bottom:4px;--container-padding-end:4px;--container-padding-start:8px;--container-height:46px;--container-gap:8px;--input-background-color:var(--cpsl-color-input-surface-default);--input-background-color-disabled:var(--cpsl-color-input-surface-disabled);--input-color:var(--cpsl-color-text-primary);--input-placeholder-color:var(--cpsl-color-text-secondary);--input-font-size:
|
849
|
+
const cpslInputCss = ":host{--container-box-shadow:none;--container-box-shadow-color:var(--cpsl-color-alpha-black-16);--container-border-color:var(--cpsl-color-input-border-active);--container-border-error-color:var(--cpsl-color-input-border-error);--container-background-color:var(--cpsl-color-input-surface-default);--container-background-color-disabled:var(--cpsl-color-input-surface-disabled);--container-border-width:1px;--container-border-radius:var(--cpsl-border-radius-input);--container-padding-top:4px;--container-padding-bottom:4px;--container-padding-end:4px;--container-padding-start:8px;--container-height:46px;--container-gap:8px;--input-background-color:var(--cpsl-color-input-surface-default);--input-background-color-disabled:var(--cpsl-color-input-surface-disabled);--input-color:var(--cpsl-color-text-primary);--input-placeholder-color:var(--cpsl-color-text-secondary);--input-font-size:var(--cpsl-font-size-body-m);--label-color:var(--cpsl-color-text-primary);--label-font-size:var(--cpsl-font-size-body-s);--label-margin-bottom:5px;--helper-text-color:var(--cpsl-color-text-secondary);--helper-text-error-color:var(--cpsl-color-text-error);--helper-text-icon-color:var(--cpsl-color-text-secondary);--helper-text-icon-error-color:var(--cpsl-color-text-error);--helper-text-icon-size:16px;--helper-text-font-size:var(--cpsl-font-size-body-xs);--helper-text-margin-top:8px;display:block;font-family:var(--cpsl-font-family, inherit)}:host(.disabled){--container-background-color:var(--container-background-color-disabled);--input-background-color:var(--input-background-color-disabled);--input-color:var(--cpsl-color-text-secondary)}:host(:not(.has-value)){--container-border-color:var(--cpsl-color-input-border-placeholder);--input-color:var(--cpsl-color-text-secondary);--container-background-color:transparent;--input-background-color:transparent}:host(.focused){--container-box-shadow:0px 0px 0px 2px var(--container-box-shadow-color);--container-border-color:var(--cpsl-color-input-border-active);--container-background-color:var(--cpsl-color-input-surface-default)}.input-container{-webkit-padding-start:var(--container-padding-start);padding-inline-start:var(--container-padding-start);-webkit-padding-end:var(--container-padding-end);padding-inline-end:var(--container-padding-end);padding-top:var(--container-padding-top);padding-bottom:var(--container-padding-bottom);display:flex;align-items:center;box-sizing:border-box;height:var(--container-height);gap:var(--container-gap);border-style:solid;border-width:var(--container-border-width);border-color:var(--container-border-color);border-radius:var(--container-border-radius);background-color:var(--container-background-color);box-shadow:var(--container-box-shadow)}.error-container{border-color:var(--container-border-error-color)}.native-input{flex:1;min-width:0;border:none;height:100%;box-sizing:border-box;font-size:var(--input-font-size);color:var(--input-color);background-color:var(--input-background-color);font-family:var(--cpsl-font-family, inherit)}.native-input:focus,.native-input:focus-visible{outline:none}.native-input::placeholder{color:var(--input-placeholder-color);opacity:1;}.label{display:inline-block;color:var(--label-color);font-size:var(--label-font-size);font-weight:500;margin-bottom:var(--label-margin-bottom)}.helper-text-container{display:flex;align-items:center;gap:4px;color:var(--helper-text-color);font-size:var(--helper-text-font-size);font-weight:500;margin-top:var(--helper-text-margin-top)}.helper-text-container cpsl-icon{--height:var(--helper-text-icon-size);--width:var(--helper-text-icon-size);--icon-color:var(--helper-text-icon-color)}.error-text{color:var(--helper-text-error-color)}.error-text cpsl-icon{--icon-color:var(--helper-text-icon-error-color)}:host ::slotted([slot=start]){flex:0}:host ::slotted([slot=end]){flex:0}:host ::slotted(cpsl-icon){--icon-color:var(--input-color)}:host ::slotted(cpsl-button){width:calc(var(--container-height) - var(--container-padding-top) - var(--container-padding-bottom) - var(--container-border-width) * 2);--button-border-radius:calc(var(--container-border-radius) - 2px)}";
|
793
850
|
const CpslInputStyle0 = cpslInputCss;
|
794
851
|
|
795
852
|
const CpslInput = class {
|
@@ -899,7 +956,7 @@ const CpslInput = class {
|
|
899
956
|
}
|
900
957
|
render() {
|
901
958
|
var _a;
|
902
|
-
return (h(Host, { key: '
|
959
|
+
return (h(Host, { key: '3e1a55cf2869a31c54ab03c3ecf2bae84ef5031b', class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.focusedValue) || Boolean(this.value) } }, this.label && (h("label", { class: "label", htmlFor: this.inputId }, this.label)), h("div", { key: '00a7a2d2dde66c610a9626044aae8ed75b9e9bf3', onClick: this.focusInput, class: { 'input-container': true, 'error-container': Boolean(this.errorText) } }, h("slot", { key: 'aefa6ccf3ca17216da5a657e104f471109836c78', name: "start" }), h("input", { key: '86e8426bff08ead8595bd40086fc7e5fc3c67295', class: "native-input", id: this.inputId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, type: this.type, value: this.value, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur }), h("slot", { key: '246e05dbbc4740ce09bd9b4bba779eb0d1010882', name: "end" })), (this.errorText || this.helperText) && (h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("cpsl-icon", { icon: Boolean(this.errorText) ? 'alertCircle' : 'infoCircle' }), h("span", null, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
|
903
960
|
}
|
904
961
|
get el() { return getElement(this); }
|
905
962
|
static get watchers() { return {
|
@@ -10083,6 +10140,32 @@ const CpslModal = class {
|
|
10083
10140
|
this.footerExpanded ? this.expandFooterTl.play() : this.expandFooterTl.reverse();
|
10084
10141
|
}
|
10085
10142
|
toggleModal() {
|
10143
|
+
if (this.hasAnimatedIn) {
|
10144
|
+
this.handleAnimation();
|
10145
|
+
}
|
10146
|
+
}
|
10147
|
+
componentDidLoad() {
|
10148
|
+
this.handleAnimation();
|
10149
|
+
this.hasAnimatedIn = true;
|
10150
|
+
mm.add(`(min-width: ${MOBILE_SIZE + 1}px)`, () => {
|
10151
|
+
var _a;
|
10152
|
+
(_a = this.draggable) === null || _a === void 0 ? void 0 : _a.disable();
|
10153
|
+
gsapWithCSS.timeline({}).set(this.modalWrapperEl, { yPercent: 0, scale: this.open ? 1 : 0.8, opacity: this.open ? 1 : 0 });
|
10154
|
+
});
|
10155
|
+
mm.add(`(max-width: ${MOBILE_SIZE}px)`, () => {
|
10156
|
+
this.initDraggable();
|
10157
|
+
gsapWithCSS.timeline({}).set(this.modalWrapperEl, { scale: 1, opacity: 1, yPercent: this.open ? -100 : 0 });
|
10158
|
+
});
|
10159
|
+
this.footerSlotEl.addEventListener('slotchange', () => {
|
10160
|
+
if (this.footerSlotEl.assignedNodes().length >= 1) {
|
10161
|
+
this.hasFooter = true;
|
10162
|
+
}
|
10163
|
+
else {
|
10164
|
+
this.hasFooter = false;
|
10165
|
+
}
|
10166
|
+
});
|
10167
|
+
}
|
10168
|
+
handleAnimation() {
|
10086
10169
|
if (this.open) {
|
10087
10170
|
if (window.innerWidth >= MOBILE_SIZE + 1) {
|
10088
10171
|
gsapWithCSS
|
@@ -10157,25 +10240,6 @@ const CpslModal = class {
|
|
10157
10240
|
}
|
10158
10241
|
}
|
10159
10242
|
}
|
10160
|
-
componentDidLoad() {
|
10161
|
-
mm.add(`(min-width: ${MOBILE_SIZE + 1}px)`, () => {
|
10162
|
-
var _a;
|
10163
|
-
(_a = this.draggable) === null || _a === void 0 ? void 0 : _a.disable();
|
10164
|
-
gsapWithCSS.timeline({}).set(this.modalWrapperEl, { yPercent: 0, scale: this.open ? 1 : 0.8, opacity: this.open ? 1 : 0 });
|
10165
|
-
});
|
10166
|
-
mm.add(`(max-width: ${MOBILE_SIZE}px)`, () => {
|
10167
|
-
this.initDraggable();
|
10168
|
-
gsapWithCSS.timeline({}).set(this.modalWrapperEl, { scale: 1, opacity: 1, yPercent: this.open ? -100 : 0 });
|
10169
|
-
});
|
10170
|
-
this.footerSlotEl.addEventListener('slotchange', () => {
|
10171
|
-
if (this.footerSlotEl.assignedNodes().length >= 1) {
|
10172
|
-
this.hasFooter = true;
|
10173
|
-
}
|
10174
|
-
else {
|
10175
|
-
this.hasFooter = false;
|
10176
|
-
}
|
10177
|
-
});
|
10178
|
-
}
|
10179
10243
|
addExpandAnim() {
|
10180
10244
|
setTimeout(() => {
|
10181
10245
|
this.expandFooterTl = gsapWithCSS
|
@@ -10258,11 +10322,10 @@ const CpslModal = class {
|
|
10258
10322
|
return this.el.shadowRoot.getElementById('modal-header');
|
10259
10323
|
}
|
10260
10324
|
get Modal() {
|
10261
|
-
return (h("div", { class: { 'modal-container': true, 'no-footer': !this.hasFooter }, part: "modal-container", id: "modal-container" }, h("slot", null), h("div", { id: "modal-inner-container", class: { 'modal-inner-container': true, 'no-footer': !this.hasFooter }, part: "modal-inner-container" }, h("div", { id: "modal-content", part: "modal-content" }, h("div", { id: "modal-header", class: "modal-header" }, h("slot", { name: "header" })), h("slot", { name: "body" })), h("div", { id: "modal-header-expanded", class: { 'modal-header': true, 'expanded': true, 'no-opacity': true } }, h("slot", { name: "footerExpandedHeader" }))), h("div", { id: "modal-footer" }, h("slot", { name: "footer" })), h("div", { id: "modal-footer-expanded", class: { 'expanded': true, 'no-opacity': true } }, h("slot", { name: "footerExpandedFooter" }))));
|
10325
|
+
return (h("div", { class: { 'modal-container': true, 'no-footer': !this.hasFooter }, part: "modal-container", id: "modal-container" }, h("slot", null), h("div", { id: "modal-inner-container", class: { 'modal-inner-container': true, 'no-footer': !this.hasFooter }, part: "modal-inner-container" }, h("div", { id: "modal-content", part: "modal-content" }, h("div", { id: "modal-header", class: "modal-header", part: "modal-header" }, h("slot", { name: "header" })), h("div", { id: "modal-body", class: "modal-body", part: "modal-body" }, h("slot", { name: "body" }))), h("div", { id: "modal-header-expanded", class: { 'modal-header': true, 'expanded': true, 'no-opacity': true }, part: "modal-header-expanded" }, h("slot", { name: "footerExpandedHeader" }))), h("div", { id: "modal-footer", part: "modal-footer" }, h("slot", { name: "footer" })), h("div", { id: "modal-footer-expanded", class: { 'expanded': true, 'no-opacity': true }, part: "modal-footer-expanded" }, h("slot", { name: "footerExpandedFooter" }))));
|
10262
10326
|
}
|
10263
10327
|
render() {
|
10264
10328
|
if (this.noOverlay) {
|
10265
|
-
this.addExpandAnim();
|
10266
10329
|
return h(Host, null, this.Modal);
|
10267
10330
|
}
|
10268
10331
|
return (h(Host, { class: { 'include-mobile-styling': true } }, h("cpsl-overlay", { id: "overlay", open: this.open, enterTransitionDuration: this.enterTransitionDuration, exitTransitionDuration: this.exitTransitionDuration }), h("div", { id: "modal-wrapper", class: "modal-wrapper" }, this.Modal)));
|
@@ -10305,7 +10368,7 @@ const CpslOverlay = class {
|
|
10305
10368
|
}
|
10306
10369
|
}
|
10307
10370
|
render() {
|
10308
|
-
return (h(Host, { key: '
|
10371
|
+
return (h(Host, { key: 'fb52455d1a68056a20f95e7572dd4afcb1827c41' }, h("slot", { key: '70c5a7f0ecda8560c92ea6f907ad60650f1cdcf2' })));
|
10309
10372
|
}
|
10310
10373
|
get el() { return getElement(this); }
|
10311
10374
|
static get watchers() { return {
|
@@ -10323,7 +10386,7 @@ const CpslPill = class {
|
|
10323
10386
|
this.text = undefined;
|
10324
10387
|
}
|
10325
10388
|
render() {
|
10326
|
-
return (h(Host, { key: '
|
10389
|
+
return (h(Host, { key: '061ac64aeb0f301d51f62ff889b6a817b0e5abba' }, h("div", { key: 'b6d260c1431d5540c07e976e8fc6d6680dcdda43', class: "pill-container" }, h("span", { key: '22d35f5d971c5ce45995e70af3eb9ef0446fdad1' }, this.text))));
|
10327
10390
|
}
|
10328
10391
|
};
|
10329
10392
|
CpslPill.style = CpslPillStyle0;
|
@@ -10398,7 +10461,7 @@ const CpslQrCode = class {
|
|
10398
10461
|
qrCode.append(container);
|
10399
10462
|
}
|
10400
10463
|
render() {
|
10401
|
-
return (h(Host, { key: '
|
10464
|
+
return (h(Host, { key: '8aa4d75e098ba25375d26e9e84e150cc70106ffa' }, h("div", { key: '02b8d5f1192ecce74476b76f5a6e8602589e2b58', id: "qr-container", class: "qr-container" })));
|
10402
10465
|
}
|
10403
10466
|
get el() { return getElement(this); }
|
10404
10467
|
};
|
@@ -10524,7 +10587,7 @@ const CpslSlideButton = class {
|
|
10524
10587
|
return this.el.shadowRoot.getElementById('end-icon');
|
10525
10588
|
}
|
10526
10589
|
render() {
|
10527
|
-
return (h(Host, { key: '
|
10590
|
+
return (h(Host, { key: 'ce018bff4b8a965f6828bac0a16ab0ebbf5000d6' }, h("div", { key: '0620f35a12979b3262eca8b1a25a1af59745761d', id: "slider-container", class: "slider-container" }, h("div", { key: '07c87359d2fff731a4432c802845ace2d361980b', id: "start-slider-container-background", class: { 'start-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: '4140a0ab0f2f59693a35b9d36c0a0b6fd6152fbe', id: "end-slider-container-background", class: { 'end-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: '39ca4cbcc83d4a8667f93cbeca1dd6c1637d0db2', id: "slider", class: { slider: true, disabled: this.disabled } }, h("cpsl-icon", { key: 'f0733efde0e3a00b34d0dd08267e2893f3dfc658', id: "start-icon", class: { 'start-icon': true, 'icon': true }, icon: this.startIcon }), h("cpsl-icon", { key: '5f77af9484aad6bc02a8caa89e5c066334f9835b', id: "end-icon", class: { 'end-icon': true, 'icon': true }, icon: this.endIcon })), h("span", { key: 'ebf3026838ed70e406704ba85ecd68c0aa04db13', id: "start-text", class: { 'start-text': true, 'disabled': this.disabled } }, this.startText), h("span", { key: 'd13ea9ea109900c679c049702760b1c8ce08e38a', id: "end-text", class: "end-text" }, this.endText))));
|
10528
10591
|
}
|
10529
10592
|
get el() { return getElement(this); }
|
10530
10593
|
};
|
@@ -10540,13 +10603,13 @@ const CpslSpinner = class {
|
|
10540
10603
|
this.speed = 1;
|
10541
10604
|
}
|
10542
10605
|
render() {
|
10543
|
-
return (h(Host, { key: '
|
10606
|
+
return (h(Host, { key: 'f52df0bdd08e1de7ffb6cdda5f1791b1524cbbbe', style: {
|
10544
10607
|
'height': `${this.size}px`,
|
10545
10608
|
'width': `${this.size}px`,
|
10546
10609
|
'animation': `spin ${this.speed}s linear infinite`,
|
10547
10610
|
'-webkit-animation': `spin ${this.speed}s linear infinite`,
|
10548
10611
|
'-moz-animation': `spin ${this.speed}s linear infinite`,
|
10549
|
-
} }, h("svg", { key: '
|
10612
|
+
} }, h("svg", { key: '867ba4a123619a10de1700ed9c23a9c154fed67c', height: this.size, width: this.size, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 54 54", fill: "none" }, h("path", { key: 'd4711f92c2dd5d85b01e26e3c3a82f776cd1b72f', d: "M43.1586 17C39.8082 11.5978 33.8243 8 27 8C16.5066 8 8 16.5066 8 27C8 37.4934 16.5066 46 27 46C33.8242 46 39.8082 42.4022 43.1586 37", "stroke-width": "6", "stroke-linecap": "round" }), h("circle", { key: '69cbe92b1cc4f8d1736d4529b78fc5969f127844', cx: "45", cy: "27", r: "5" }))));
|
10550
10613
|
}
|
10551
10614
|
};
|
10552
10615
|
CpslSpinner.style = CpslSpinnerStyle0;
|
@@ -10578,7 +10641,7 @@ const CpslTab = class {
|
|
10578
10641
|
}
|
10579
10642
|
}
|
10580
10643
|
render() {
|
10581
|
-
return (h(Host, { key: '
|
10644
|
+
return (h(Host, { key: 'ece9ef79afb7bd761b945f8495b5d7a5707eea28', onClick: this.onTabClicked }, h("div", { key: '787d62147f208c37bd7e494499be123317499ed3', class: { 'tab-container': true } }, h("slot", { key: '2834e0f4c14b2940941e0dbe78105835111688cf' }))));
|
10582
10645
|
}
|
10583
10646
|
get el() { return getElement(this); }
|
10584
10647
|
};
|
@@ -10637,7 +10700,7 @@ const CpslTabs = class {
|
|
10637
10700
|
const tabsPosition = this.el.getBoundingClientRect();
|
10638
10701
|
const tabsBorderWidth = +getComputedStyle(this.el).getPropertyValue('--tabs-border-width').slice(0, -2);
|
10639
10702
|
const selectedTabRect = this.selectedTabRect;
|
10640
|
-
return (h(Host, { key: '
|
10703
|
+
return (h(Host, { key: '47d4b201d34630654f4d11c26972f0ddf9d9f748', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, h("div", { key: '2a956a61b65fb99445a76211448b0ca2b830baab', class: "tabs-container" }, h("slot", { key: '3ef04f0dacff55ea829b92e22b0f260e1f95bb95' }), h("div", { key: '4cf63ec114998fa41b3367c9c648467044f19d95', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth * 2}px` } }))));
|
10641
10704
|
}
|
10642
10705
|
get el() { return getElement(this); }
|
10643
10706
|
static get watchers() { return {
|
@@ -10651,15 +10714,64 @@ const getTab = (tabs, tab) => {
|
|
10651
10714
|
};
|
10652
10715
|
CpslTabs.style = CpslTabsStyle0;
|
10653
10716
|
|
10654
|
-
const cpslTextCss = ":host{font-family:var(--cpsl-font-family, inherit);color:var(--cpsl-color-text-primary)}";
|
10717
|
+
const cpslTextCss = ":host{font-family:var(--cpsl-font-family, inherit);color:var(--cpsl-color-text-primary);padding:0px;margin:0px;display:block}:host p,h1,h2,h3,h4,h5,h6{padding:0px;margin:0px;font-weight:inherit;font-size:inherit;letter-spacing:inherit}:host(.primary){color:var(--cpsl-color-text-primary)}:host(.secondary){color:var(--cpsl-color-text-secondary)}:host(.subtle){color:var(--cpsl-color-text-subtle)}:host(.inverted){color:var(--cpsl-color-text-inverted)}:host(.error){color:var(--cpsl-color-text-error)}:host(.medium){font-weight:500}:host(.semi-bold){font-weight:600}:host(.bold){font-weight:700}:host(.body-2xs){font-size:var(--cpsl-font-size-body-2xs)}:host(.body-xs){font-size:var(--cpsl-font-size-body-xs)}:host(.body-s){font-size:var(--cpsl-font-size-body-s)}:host(.body-m){font-size:var(--cpsl-font-size-body-m)}:host(.body-l){font-size:var(--cpsl-font-size-body-l)}:host(.body-xl){font-size:var(--cpsl-font-size-body-xl)}:host(.heading-xs){font-size:var(--cpsl-font-size-heading-xs)}:host(.heading-s){font-size:var(--cpsl-font-size-heading-s)}:host(.heading-m){font-size:var(--cpsl-font-size-heading-m);letter-spacing:-0.4px}:host(.heading-l){font-size:var(--cpsl-font-size-heading-l);letter-spacing:-1.12px}:host(.heading-xl){font-size:var(--cpsl-font-size-heading-xl);letter-spacing:-1.28px}:host(.heading-2xl){font-size:var(--cpsl-font-size-heading-2xl);letter-spacing:-1.44px}";
|
10655
10718
|
const CpslTextStyle0 = cpslTextCss;
|
10656
10719
|
|
10657
10720
|
const CpslText = class {
|
10658
10721
|
constructor(hostRef) {
|
10659
10722
|
registerInstance(this, hostRef);
|
10723
|
+
this.color = 'primary';
|
10724
|
+
this.variant = 'bodyM';
|
10725
|
+
this.weight = 'regular';
|
10726
|
+
}
|
10727
|
+
get Content() {
|
10728
|
+
switch (this.variant) {
|
10729
|
+
case 'headingXS': {
|
10730
|
+
return (h("h6", null, h("slot", null)));
|
10731
|
+
}
|
10732
|
+
case 'headingS': {
|
10733
|
+
return (h("h5", null, h("slot", null)));
|
10734
|
+
}
|
10735
|
+
case 'headingM': {
|
10736
|
+
return (h("h4", null, h("slot", null)));
|
10737
|
+
}
|
10738
|
+
case 'headingL': {
|
10739
|
+
return (h("h3", null, h("slot", null)));
|
10740
|
+
}
|
10741
|
+
case 'headingXL': {
|
10742
|
+
return (h("h2", null, h("slot", null)));
|
10743
|
+
}
|
10744
|
+
case 'heading2XL': {
|
10745
|
+
return (h("h1", null, h("slot", null)));
|
10746
|
+
}
|
10747
|
+
default: {
|
10748
|
+
return (h("p", null, h("slot", null)));
|
10749
|
+
}
|
10750
|
+
}
|
10660
10751
|
}
|
10661
10752
|
render() {
|
10662
|
-
return (h(Host, { key: '
|
10753
|
+
return (h(Host, { key: '33b70ccfe3929f306d0a9b956ec2a4e16bf751b8', class: {
|
10754
|
+
'primary': this.color === 'primary',
|
10755
|
+
'secondary': this.color === 'secondary',
|
10756
|
+
'subtle': this.color === 'subtle',
|
10757
|
+
'inverted': this.color === 'inverted',
|
10758
|
+
'error': this.color === 'error',
|
10759
|
+
'medium': this.weight === 'medium',
|
10760
|
+
'semi-bold': this.weight === 'semiBold',
|
10761
|
+
'bold': this.weight === 'bold',
|
10762
|
+
'body-2xs': this.variant === 'body2XS',
|
10763
|
+
'body-xs': this.variant === 'bodyXS',
|
10764
|
+
'body-s': this.variant === 'bodyS',
|
10765
|
+
'body-m': this.variant === 'bodyM',
|
10766
|
+
'body-l': this.variant === 'bodyL',
|
10767
|
+
'body-xl': this.variant === 'bodyXL',
|
10768
|
+
'heading-xs': this.variant === 'headingXS',
|
10769
|
+
'heading-s': this.variant === 'headingS',
|
10770
|
+
'heading-m': this.variant === 'headingM',
|
10771
|
+
'heading-l': this.variant === 'headingL',
|
10772
|
+
'heading-xl': this.variant === 'headingXL',
|
10773
|
+
'heading-2xl': this.variant === 'heading2XL',
|
10774
|
+
} }, this.Content));
|
10663
10775
|
}
|
10664
10776
|
};
|
10665
10777
|
CpslText.style = CpslTextStyle0;
|
@@ -10674,11 +10786,11 @@ const CpslTileButton = class {
|
|
10674
10786
|
this.icon = undefined;
|
10675
10787
|
}
|
10676
10788
|
render() {
|
10677
|
-
return (h(Host, { key: '
|
10789
|
+
return (h(Host, { key: '61cbce3574220ee8009ab95c3e37d80535543d1c' }, h("button", { key: '50169b226155e2b06014c415dd522dfc0deb799c', class: "button-native" }, h("cpsl-icon", { key: '9ee77a4d725f4bec258ae753365a1f5aca733ff5', exportparts: "icon", src: this.src, icon: this.icon }), h("slot", { key: 'b01617dbca7322d9cc8f58c30680cd5f3ed0f576' }))));
|
10678
10790
|
}
|
10679
10791
|
};
|
10680
10792
|
CpslTileButton.style = CpslTileButtonStyle0;
|
10681
10793
|
|
10682
|
-
export { CpslAlert as cpsl_alert, CpslButton as cpsl_button, CpslCodeInput as cpsl_code_input, CpslDivider as cpsl_divider, CpslIcon as cpsl_icon, CpslInput as cpsl_input, CpslModal as cpsl_modal, CpslOverlay as cpsl_overlay, CpslPill as cpsl_pill, CpslProgressIndicator as cpsl_progress_indicator, CpslQrCode as cpsl_qr_code, CpslSlideButton as cpsl_slide_button, CpslSpinner as cpsl_spinner, CpslTab as cpsl_tab, CpslTabs as cpsl_tabs, CpslText as cpsl_text, CpslTileButton as cpsl_tile_button };
|
10794
|
+
export { CpslAlert as cpsl_alert, CpslButton as cpsl_button, CpslCodeInput as cpsl_code_input, CpslDivider as cpsl_divider, CpslDropdown as cpsl_dropdown, CpslIcon as cpsl_icon, CpslInput as cpsl_input, CpslModal as cpsl_modal, CpslOverlay as cpsl_overlay, CpslPill as cpsl_pill, CpslProgressIndicator as cpsl_progress_indicator, CpslQrCode as cpsl_qr_code, CpslSlideButton as cpsl_slide_button, CpslSpinner as cpsl_spinner, CpslTab as cpsl_tab, CpslTabs as cpsl_tabs, CpslText as cpsl_text, CpslTileButton as cpsl_tile_button };
|
10683
10795
|
|
10684
|
-
//# sourceMappingURL=cpsl-
|
10796
|
+
//# sourceMappingURL=cpsl-alert_18.entry.js.map
|