ion-card-header.js 3.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. /*!
  2. * (C) Ionic http://ionicframework.com - MIT License
  3. */
  4. import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
  5. import { c as createColorClasses } from './theme.js';
  6. import { b as getIonMode } from './ionic-global.js';
  7. const cardHeaderIosCss = ":host{--background:transparent;--color:inherit;display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:column;flex-direction:column;background:var(--background);color:var(--color)}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host{-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px;padding-top:20px;padding-bottom:16px;-ms-flex-direction:column-reverse;flex-direction:column-reverse}@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)}}";
  8. const IonCardHeaderIosStyle0 = cardHeaderIosCss;
  9. const cardHeaderMdCss = ":host{--background:transparent;--color:inherit;display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:column;flex-direction:column;background:var(--background);color:var(--color)}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:16px;padding-bottom:16px}::slotted(ion-card-title:not(:first-child)),::slotted(ion-card-subtitle:not(:first-child)){margin-top:8px}";
  10. const IonCardHeaderMdStyle0 = cardHeaderMdCss;
  11. const CardHeader = /*@__PURE__*/ proxyCustomElement(class CardHeader extends HTMLElement {
  12. constructor() {
  13. super();
  14. this.__registerHost();
  15. this.__attachShadow();
  16. this.color = undefined;
  17. this.translucent = false;
  18. }
  19. render() {
  20. const mode = getIonMode(this);
  21. return (h(Host, { key: '64246b81931203a64d553c788cd736f41e23f37b', class: createColorClasses(this.color, {
  22. 'card-header-translucent': this.translucent,
  23. 'ion-inherit-color': true,
  24. [mode]: true,
  25. }) }, h("slot", { key: 'af2da2dfe266889afeb57fac25c6a730558dbba4' })));
  26. }
  27. static get style() { return {
  28. ios: IonCardHeaderIosStyle0,
  29. md: IonCardHeaderMdStyle0
  30. }; }
  31. }, [33, "ion-card-header", {
  32. "color": [513],
  33. "translucent": [4]
  34. }]);
  35. function defineCustomElement$1() {
  36. if (typeof customElements === "undefined") {
  37. return;
  38. }
  39. const components = ["ion-card-header"];
  40. components.forEach(tagName => { switch (tagName) {
  41. case "ion-card-header":
  42. if (!customElements.get(tagName)) {
  43. customElements.define(tagName, CardHeader);
  44. }
  45. break;
  46. } });
  47. }
  48. const IonCardHeader = CardHeader;
  49. const defineCustomElement = defineCustomElement$1;
  50. export { IonCardHeader, defineCustomElement };