test-isc
Version:
An Ionic component similar to Ionic Select, that allows to search items, including async search, group, add, edit, delete items, and much more.
54 lines (53 loc) • 4.72 kB
JavaScript
import { r as registerInstance, d as createEvent, h, H as Host, e as getElement } from './index-b6f64b02.js';
import { g as getIonMode } from './ionic-global-5d790111.js';
import { c as createColorClasses } from './theme-74c22054.js';
var 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:0;padding-bottom:0;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;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.ion-cloned-element){--color:var(--ion-text-color, #000)}";
var 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}";
var ToolbarTitle = /** @class */ (function () {
function ToolbarTitle(hostRef) {
registerInstance(this, hostRef);
this.ionStyle = createEvent(this, "ionStyle", 7);
}
ToolbarTitle.prototype.sizeChanged = function () {
this.emitStyle();
};
ToolbarTitle.prototype.connectedCallback = function () {
this.emitStyle();
};
ToolbarTitle.prototype.emitStyle = function () {
var _a;
var size = this.getSize();
this.ionStyle.emit((_a = {},
_a["title-" + size] = true,
_a));
};
ToolbarTitle.prototype.getSize = function () {
return (this.size !== undefined) ? this.size : 'default';
};
ToolbarTitle.prototype.render = function () {
var _a;
var mode = getIonMode(this);
var size = this.getSize();
return (h(Host, { class: Object.assign((_a = {}, _a[mode] = true, _a["title-" + size] = true, _a), createColorClasses(this.color)) }, h("div", { class: "toolbar-title" }, h("slot", null))));
};
Object.defineProperty(ToolbarTitle.prototype, "el", {
get: function () { return getElement(this); },
enumerable: true,
configurable: true
});
Object.defineProperty(ToolbarTitle, "watchers", {
get: function () {
return {
"size": ["sizeChanged"]
};
},
enumerable: true,
configurable: true
});
return ToolbarTitle;
}());
ToolbarTitle.style = {
/*STENCIL:MODE:ios*/ ios: titleIosCss,
/*STENCIL:MODE:md*/ md: titleMdCss
};
export { ToolbarTitle as ion_title };