1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, '__esModule', { value: true });
|
4 |
|
5 | const index = require('./index-a0a08b2a.js');
|
6 | const ionicGlobal = require('./ionic-global-06f21c1a.js');
|
7 | const theme = require('./theme-30b7a575.js');
|
8 |
|
9 | const cardIosCss = ":host{--ion-safe-area-left:0px;--ion-safe-area-right:0px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit);overflow:hidden}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.card-disabled){cursor:default;opacity:0.3;pointer-events:none}.card-native{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:100%;min-height:var(--min-height);-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:inherit}.card-native::-moz-focus-inner{border:0}button,a{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none}ion-ripple-effect{color:var(--ripple-color)}:host{--background:var(--ion-card-background, var(--ion-item-background, var(--ion-background-color, #fff)));--color:var(--ion-card-color, var(--ion-item-color, var(--ion-color-step-600, #666666)));margin-left:16px;margin-right:16px;margin-top:24px;margin-bottom:24px;border-radius:8px;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-transition:-webkit-transform 500ms cubic-bezier(0.12, 0.72, 0.29, 1);transition:-webkit-transform 500ms cubic-bezier(0.12, 0.72, 0.29, 1);transition:transform 500ms cubic-bezier(0.12, 0.72, 0.29, 1);transition:transform 500ms cubic-bezier(0.12, 0.72, 0.29, 1), -webkit-transform 500ms cubic-bezier(0.12, 0.72, 0.29, 1);font-size:14px;-webkit-box-shadow:0 4px 16px rgba(0, 0, 0, 0.12);box-shadow:0 4px 16px rgba(0, 0, 0, 0.12)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host{margin-left:unset;margin-right:unset;-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px}}:host(.ion-activated){-webkit-transform:scale3d(0.97, 0.97, 1);transform:scale3d(0.97, 0.97, 1)}";
|
10 |
|
11 | const cardMdCss = ":host{--ion-safe-area-left:0px;--ion-safe-area-right:0px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit);overflow:hidden}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.card-disabled){cursor:default;opacity:0.3;pointer-events:none}.card-native{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:100%;min-height:var(--min-height);-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:inherit}.card-native::-moz-focus-inner{border:0}button,a{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none}ion-ripple-effect{color:var(--ripple-color)}:host{--background:var(--ion-card-background, var(--ion-item-background, var(--ion-background-color, #fff)));--color:var(--ion-card-color, var(--ion-item-color, var(--ion-color-step-550, #737373)));margin-left:10px;margin-right:10px;margin-top:10px;margin-bottom:10px;border-radius:4px;font-size:14px;-webkit-box-shadow:0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);box-shadow:0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host{margin-left:unset;margin-right:unset;-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:10px;margin-inline-end:10px}}";
|
12 |
|
13 | const Card = class {
|
14 | constructor(hostRef) {
|
15 | index.registerInstance(this, hostRef);
|
16 | |
17 |
|
18 |
|
19 | this.button = false;
|
20 | |
21 |
|
22 |
|
23 | this.type = 'button';
|
24 | |
25 |
|
26 |
|
27 | this.disabled = false;
|
28 | |
29 |
|
30 |
|
31 |
|
32 | this.routerDirection = 'forward';
|
33 | }
|
34 | isClickable() {
|
35 | return (this.href !== undefined || this.button);
|
36 | }
|
37 | renderCard(mode) {
|
38 | const clickable = this.isClickable();
|
39 | if (!clickable) {
|
40 | return [
|
41 | index.h("slot", null)
|
42 | ];
|
43 | }
|
44 | const { href, routerAnimation, routerDirection } = this;
|
45 | const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div';
|
46 | const attrs = (TagType === 'button')
|
47 | ? { type: this.type }
|
48 | : {
|
49 | download: this.download,
|
50 | href: this.href,
|
51 | rel: this.rel,
|
52 | target: this.target
|
53 | };
|
54 | return (index.h(TagType, Object.assign({}, attrs, { class: "card-native", part: "native", disabled: this.disabled, onClick: (ev) => theme.openURL(href, ev, routerDirection, routerAnimation) }), index.h("slot", null), clickable && mode === 'md' && index.h("ion-ripple-effect", null)));
|
55 | }
|
56 | render() {
|
57 | const mode = ionicGlobal.getIonMode(this);
|
58 | return (index.h(index.Host, { class: theme.createColorClasses(this.color, {
|
59 | [mode]: true,
|
60 | 'card-disabled': this.disabled,
|
61 | 'ion-activatable': this.isClickable()
|
62 | }) }, this.renderCard(mode)));
|
63 | }
|
64 | };
|
65 | Card.style = {
|
66 | ios: cardIosCss,
|
67 | md: cardMdCss
|
68 | };
|
69 |
|
70 | const cardContentIosCss = "ion-card-content{display:block;position:relative}.card-content-ios{padding-left:20px;padding-right:20px;padding-top:20px;padding-bottom:20px;font-size:16px;line-height:1.4}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.card-content-ios{padding-left:unset;padding-right:unset;-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px}}.card-content-ios h1{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:24px;font-weight:normal}.card-content-ios h2{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:16px;font-weight:normal}.card-content-ios h3,.card-content-ios h4,.card-content-ios h5,.card-content-ios h6{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:14px;font-weight:normal}.card-content-ios p{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:14px}ion-card-header+.card-content-ios{padding-top:0}";
|
71 |
|
72 | const cardContentMdCss = "ion-card-content{display:block;position:relative}.card-content-md{padding-left:16px;padding-right:16px;padding-top:13px;padding-bottom:13px;font-size:14px;line-height:1.5}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.card-content-md{padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}}.card-content-md h1{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:24px;font-weight:normal}.card-content-md h2{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:16px;font-weight:normal}.card-content-md h3,.card-content-md h4,.card-content-md h5,.card-content-md h6{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:14px;font-weight:normal}.card-content-md p{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:14px;font-weight:normal;line-height:1.5}ion-card-header+.card-content-md{padding-top:0}";
|
73 |
|
74 | const CardContent = class {
|
75 | constructor(hostRef) {
|
76 | index.registerInstance(this, hostRef);
|
77 | }
|
78 | render() {
|
79 | const mode = ionicGlobal.getIonMode(this);
|
80 | return (index.h(index.Host, { class: {
|
81 | [mode]: true,
|
82 |
|
83 | [`card-content-${mode}`]: true
|
84 | } }));
|
85 | }
|
86 | };
|
87 | CardContent.style = {
|
88 | ios: cardContentIosCss,
|
89 | md: cardContentMdCss
|
90 | };
|
91 |
|
92 | const cardHeaderIosCss = ":host{--background:transparent;--color:inherit;display:block;position:relative;background:var(--background);color:var(--color)}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host{padding-left:20px;padding-right:20px;padding-top:20px;padding-bottom:16px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px}}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){:host(.card-header-translucent){background-color:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.9);-webkit-backdrop-filter:saturate(180%) blur(30px);backdrop-filter:saturate(180%) blur(30px)}}";
|
93 |
|
94 | const cardHeaderMdCss = ":host{--background:transparent;--color:inherit;display:block;position:relative;background:var(--background);color:var(--color)}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host{padding-left:16px;padding-right:16px;padding-top:16px;padding-bottom:16px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}}::slotted(ion-card-title:not(:first-child)),::slotted(ion-card-subtitle:not(:first-child)){margin-top:8px}";
|
95 |
|
96 | const CardHeader = class {
|
97 | constructor(hostRef) {
|
98 | index.registerInstance(this, hostRef);
|
99 | |
100 |
|
101 |
|
102 |
|
103 |
|
104 | this.translucent = false;
|
105 | }
|
106 | render() {
|
107 | const mode = ionicGlobal.getIonMode(this);
|
108 | return (index.h(index.Host, { class: theme.createColorClasses(this.color, {
|
109 | 'card-header-translucent': this.translucent,
|
110 | 'ion-inherit-color': true,
|
111 | [mode]: true
|
112 | }) }, index.h("slot", null)));
|
113 | }
|
114 | };
|
115 | CardHeader.style = {
|
116 | ios: cardHeaderIosCss,
|
117 | md: cardHeaderMdCss
|
118 | };
|
119 |
|
120 | const cardSubtitleIosCss = ":host{display:block;position:relative;color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-color-step-600, #666666);margin-left:0;margin-right:0;margin-top:0;margin-bottom:4px;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-size:12px;font-weight:700;letter-spacing:0.4px;text-transform:uppercase}";
|
121 |
|
122 | const cardSubtitleMdCss = ":host{display:block;position:relative;color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-color-step-550, #737373);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-size:14px;font-weight:500}";
|
123 |
|
124 | const CardSubtitle = class {
|
125 | constructor(hostRef) {
|
126 | index.registerInstance(this, hostRef);
|
127 | }
|
128 | render() {
|
129 | const mode = ionicGlobal.getIonMode(this);
|
130 | return (index.h(index.Host, { role: "heading", "aria-level": "3", class: theme.createColorClasses(this.color, {
|
131 | 'ion-inherit-color': true,
|
132 | [mode]: true
|
133 | }) }, index.h("slot", null)));
|
134 | }
|
135 | };
|
136 | CardSubtitle.style = {
|
137 | ios: cardSubtitleIosCss,
|
138 | md: cardSubtitleMdCss
|
139 | };
|
140 |
|
141 | const cardTitleIosCss = ":host{display:block;position:relative;color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-text-color, #000);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-size:28px;font-weight:700;line-height:1.2}";
|
142 |
|
143 | const cardTitleMdCss = ":host{display:block;position:relative;color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-color-step-850, #262626);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-size:20px;font-weight:500;line-height:1.2}";
|
144 |
|
145 | const CardTitle = class {
|
146 | constructor(hostRef) {
|
147 | index.registerInstance(this, hostRef);
|
148 | }
|
149 | render() {
|
150 | const mode = ionicGlobal.getIonMode(this);
|
151 | return (index.h(index.Host, { role: "heading", "aria-level": "2", class: theme.createColorClasses(this.color, {
|
152 | 'ion-inherit-color': true,
|
153 | [mode]: true
|
154 | }) }, index.h("slot", null)));
|
155 | }
|
156 | };
|
157 | CardTitle.style = {
|
158 | ios: cardTitleIosCss,
|
159 | md: cardTitleMdCss
|
160 | };
|
161 |
|
162 | exports.ion_card = Card;
|
163 | exports.ion_card_content = CardContent;
|
164 | exports.ion_card_header = CardHeader;
|
165 | exports.ion_card_subtitle = CardSubtitle;
|
166 | exports.ion_card_title = CardTitle;
|