1 |
|
2 |
|
3 |
|
4 | import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
5 | import { b as getIonMode } from './ionic-global.js';
|
6 | import { c as createColorClasses } from './theme.js';
|
7 |
|
8 | const titleIosCss = ":host{--color:initial;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;-webkit-transform:translateZ(0);transform:translateZ(0);color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}.toolbar-title{display:block;width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;pointer-events:auto}:host(.title-small) .toolbar-title{white-space:normal}:host{left:0;top:0;padding-left:90px;padding-right:90px;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);position:absolute;width:100%;height:100%;-webkit-transform:translateZ(0);transform:translateZ(0);font-size:17px;font-weight:600;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;pointer-events:none}:host-context([dir=rtl]){left:unset;right:unset;right:0}@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:90px;padding-inline-start:90px;-webkit-padding-end:90px;padding-inline-end:90px}}:host(.title-small){padding-left:9px;padding-right:9px;padding-top:6px;padding-bottom:16px;position:relative;font-size:13px;font-weight:normal}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.title-small){padding-left:unset;padding-right:unset;-webkit-padding-start:9px;padding-inline-start:9px;-webkit-padding-end:9px;padding-inline-end:9px}}:host(.title-large){padding-left:16px;padding-right:16px;padding-top:0;padding-bottom:0;-webkit-transform-origin:left center;transform-origin:left center;bottom:0;-ms-flex-align:end;align-items:flex-end;min-width:100%;padding-bottom:6px;font-size:34px;font-weight:700;text-align:start}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.title-large){padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}}:host(.title-large.title-rtl){-webkit-transform-origin:right center;transform-origin:right center}:host(.title-large.ion-cloned-element){--color:var(--ion-text-color, #000)}:host(.title-large) .toolbar-title{-webkit-transform-origin:inherit;transform-origin:inherit}:host-context([dir=rtl]):host(.title-large) .toolbar-title,:host-context([dir=rtl]).title-large .toolbar-title{-webkit-transform-origin:calc(100% - inherit);transform-origin:calc(100% - inherit)}";
|
9 |
|
10 | const titleMdCss = ":host{--color:initial;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;-webkit-transform:translateZ(0);transform:translateZ(0);color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}.toolbar-title{display:block;width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;pointer-events:auto}:host(.title-small) .toolbar-title{white-space:normal}:host{padding-left:20px;padding-right:20px;padding-top:0;padding-bottom:0;font-size:20px;font-weight:500;letter-spacing:0.0125em}@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}}:host(.title-small){width:100%;height:100%;font-size:15px;font-weight:normal}";
|
11 |
|
12 | const ToolbarTitle = proxyCustomElement(class extends HTMLElement {
|
13 | constructor() {
|
14 | super();
|
15 | this.__registerHost();
|
16 | this.__attachShadow();
|
17 | this.ionStyle = createEvent(this, "ionStyle", 7);
|
18 | }
|
19 | sizeChanged() {
|
20 | this.emitStyle();
|
21 | }
|
22 | connectedCallback() {
|
23 | this.emitStyle();
|
24 | }
|
25 | emitStyle() {
|
26 | const size = this.getSize();
|
27 | this.ionStyle.emit({
|
28 | [`title-${size}`]: true
|
29 | });
|
30 | }
|
31 | getSize() {
|
32 | return (this.size !== undefined) ? this.size : 'default';
|
33 | }
|
34 | render() {
|
35 | const mode = getIonMode(this);
|
36 | const size = this.getSize();
|
37 | return (h(Host, { class: createColorClasses(this.color, {
|
38 | [mode]: true,
|
39 | [`title-${size}`]: true,
|
40 | 'title-rtl': document.dir === 'rtl'
|
41 | }) }, h("div", { class: "toolbar-title" }, h("slot", null))));
|
42 | }
|
43 | get el() { return this; }
|
44 | static get watchers() { return {
|
45 | "size": ["sizeChanged"]
|
46 | }; }
|
47 | static get style() { return {
|
48 | ios: titleIosCss,
|
49 | md: titleMdCss
|
50 | }; }
|
51 | }, [33, "ion-title", {
|
52 | "color": [513],
|
53 | "size": [1]
|
54 | }]);
|
55 | function defineCustomElement$1() {
|
56 | if (typeof customElements === "undefined") {
|
57 | return;
|
58 | }
|
59 | const components = ["ion-title"];
|
60 | components.forEach(tagName => { switch (tagName) {
|
61 | case "ion-title":
|
62 | if (!customElements.get(tagName)) {
|
63 | customElements.define(tagName, ToolbarTitle);
|
64 | }
|
65 | break;
|
66 | } });
|
67 | }
|
68 |
|
69 | const IonTitle = ToolbarTitle;
|
70 | const defineCustomElement = defineCustomElement$1;
|
71 |
|
72 | export { IonTitle, defineCustomElement };
|