' for non-pre containers */ function fixMarkup(value) { if (options.tabReplace) { value = value.replace(/^((<[^>]+>|\t)+)/gm, function(match, p1 /*..., offset, s*/) { return p1.replace(/\t/g, options.tabReplace); }); } if (options.useBR) { value = value.replace(/\n/g, '
'); } return value; } function buildClassName(prevClassName, currentLang, resultLang) { var language = currentLang ? aliases[currentLang] : resultLang, result = [prevClassName.trim()]; if (!prevClassName.match(/\bhljs\b/)) { result.push('hljs'); } if (prevClassName.indexOf(language) === -1) { result.push(language); } return result.join(' ').trim(); } /* Applies highlighting to a DOM node containing code. Accepts a DOM node and two optional parameters for fixMarkup. */ function highlightBlock(block) { var language = blockLanguage(block); if (isNotHighlighted(language)) return; var node; if (options.useBR) { node = document.createElementNS('http://www.w3.org/1999/xhtml', 'div'); node.innerHTML = block.innerHTML.replace(/\n/g, '').replace(/
..
{{album.title}}
{{album.artist}}, {{album.year}}
Beast Epic
Iron & Wine, 2017
Good At Falling
The Japanese House, 2019
Hallucinogen
Kelela, 2015
22, A Million
Bon Iver, 2016
4 Walls
f(x), 2015
Welcome to Ionic
Let's start your first app
🎉
)
}
renderStep() {
switch (this.step) {
case this.STEP_BASICS: return this.renderBasics();
case this.STEP_PROFILE: return null;
case this.STEP_FINISH: return this.renderFinish();
}
}
render() {
return (
You're all set
Run this to see your amazing new app:
{instructions}
{this.step < 2 ? (
s.name).join()}
index={this.step}
/>
) : null}
);
}
}
const Button = (props, children) => (
);
const AppIcon = ({ img, emoji, theme, onChooseEmoji, isDropping,
onChooseFile, onDragOver, onDragLeave, onDrop }) => {
const bgColor = img ? 'transparent': theme;
let bgImage;
if (emoji) {
let emojiImage = emoji.image.replace('.png', '');
const imageSplit = emojiImage.split('-');
// For some reason we need to remove fe0f from images that just have it
// as blah-fe0f since those aren't named as such in the twemoji database
if (imageSplit.length == 2 && imageSplit[1] === 'fe0f') {
emojiImage = emojiImage.replace('-fe0f', '');
}
bgImage = `url('${emojiSvg(emojiImage)}')`;
} else {
bgImage = `url(${img})`;
}
return (
)
};
const ThemeSwitcher = ({ value, onChange, onPick }) => {
const themes = [
...THEMES,
!THEMES.find(t => t === value) ? value : null
].filter(t => !!t);
return (
{this.renderStep()}
Prefer to install manually?
Follow our CLI installation guide
Follow our CLI installation guide
{themes.map(t => (
)
}
const FrameworkSwitcher = ({ value, onChange }) => (
onChange(t)}>
{ value === t ? (
) : null}
))}
onPick()}
>
{FRAMEWORKS.map(f => (
);
const TemplateSwitcher = ({ value, onChange }) => (
onChange(f.id)}>
))}
{f.name}
{TEMPLATES.map(f => (
);
const InfoCircle = () => (
onChange(f.id)}>
))}
{f.name}
{this.backdropEl = e}} class="fade" onClick={() => this.handleExit()}>
![{data[id].image.alt}]({data[id].image.url})
{data[id].text.normal}{' '} {data[id].text.bold}
{ e.preventDefault(); window.c('Button', 'Homepage eBook CTA', null, null, { trackerName: 'legacy'}); }} >Read the free eBook ->
{categories.map(c => {
return (
)
interface SearchProps {
onInput: (e) => void;
onClear: (e) => void;
value: string;
}
const Search = ({ onInput, onClear, value }: SearchProps) => (
selectCategory(c)}
>
{EmojiSvgs.categories[c.id]()}
);
}
)}
{ value ? (
)
const processName = (name) => name
.toLocaleLowerCase().split(/[\s_-]+/)
.map(s => s[0].toUpperCase() + s.slice(1))
.join(' ');
interface EmojisProps {
visibleEmojis: string[];
emojis: EmojiMap;
emojiPicked: (emoji: Emoji) => void;
}
const Emojis = ({ visibleEmojis, emojis, emojiPicked }: EmojisProps) => {
return (
-
{visibleEmojis.map(e => {
const em = emojis[e]
const x = em.sheet_x * (100 / 56);
const y = em.sheet_y * (100 / 56);
let name = null;
if (em.name) {
name = processName(em.name);
} else if (em.short_name) {
name = processName(em.short_name);
}
return (
- emojiPicked(em)}> ) })}
-
{Object.keys(this.markup).map(key => (
-
-
{Object.keys(this.markup).map(key => (
- ))}
Here’s a small text description for the card component. Nothing more, nothing less.
Discover
Music we think you'll love.
{album.title}
{album.artist}, {album.year}
Beast Epic
Iron & Wine, 2017
Good At Falling
The Japanese House, 2019
Hallucinogen
Kelela, 2015
22, A Million
Bon Iver, 2016
4 Walls
f(x), 2015
- {this.days} DAY{this.days == 1 ? '' : 'S'}
- {this.hours} HOUR{this.hours == 1 ? '' : 'S'}
- {this.minutes} MINUTE{this.minutes == 1 ? '' : 'S'}
- {this.seconds} SECOND{this.seconds == 1 ? '' : 'S'}
-
{Object.keys(this.markup).map(key => (
-
-
{Object.keys(this.markup).map(key => (
-
))}
{this.error}
: null}
{screens.map((screen, i) =>
)}
,
]);
}
}
================================================
FILE: assets/stencil/components/ionic-appflow-activatior/ionic-appflow-activator.scss
================================================
@import '../../vars';
ionic-appflow-activator {
overflow: hidden;
.nav {
width: 100%;
background: #fff;
box-shadow: 0px -12px 24px rgba(2, 8, 20, 0.06), 0px -4px 8px rgba(2, 8, 20, 0.02);
z-index: 20;
position: relative;
border-bottom: 1px solid #F0F0F0;
}
ul {
position: relative;
z-index: 10;
display: flex;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
padding-top: 24px;
display: inline-block;
position: relative;
list-style: none;
flex: 1;
cursor: default;
}
li + li {
margin-left: 56px;
}
li {
h5,
p {
font-family: $font-family-inter;
transition: color 0.2s;
}
h5 {
display: block;
font-size: 14px;
line-height: 22px;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 600;
color: #616E7E;
}
p {
color: #92A1B3;
margin-bottom: 24px;
}
svg {
transition: transform 0.2s;
}
}
li.active {
h5 {
color: #010610;
}
p {
color: #5B708B;
}
svg {
transform: translateY(-2px);
}
}
.indicator {
position: absolute;
bottom: 0;
left: 0;
height: 2px;
width: 0%;
background-color: #6C89F7;
}
.app-screenshot {
position: relative;
z-index: 5;
.screen {
border-radius: 16px;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
transform: translateY(6px);
animation-fill-mode: forwards;
&.animate-in {
animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
animation-duration: 1s;
animation-name: animateIn;
animation-delay: 0.1s;
z-index: 15;
}
&.animate-out {
animation-timing-function: ease;
animation-duration: 0.6s;
animation-name: animateOut;
z-index: 10;
}
}
img {
vertical-align: bottom;
width: 100%;
}
}
}
@keyframes animateIn {
from {
// transform: translateY(6px);
opacity: 0;
}
to {
// transform: translateY(0);
opacity: 1;
}
}
@keyframes animateOut {
from {
// transform: translateY(0) scale(1);
opacity: 1;
}
to {
// transform: translateY(4px) scale(0.98);
opacity: 0;
}
}
================================================
FILE: assets/stencil/components/ionic-bar-chart/ionic-bar-chart.scss
================================================
@import '../../vars';
ionic-bar-chart {
font-style: normal;
font-weight: normal;
line-height: normal;
font-size: 16px;
display: block;
letter-spacing: -0.04em;
.bar-container {
width: 100%;
padding-right: 50px;
max-width: 697px;
}
.bar {
height: 12px;
position: relative;
border-radius: 2px;
span {
position: absolute;
right: -40px;
font-weight: 500;
top: -3px;
}
}
strong {
margin-top: 10px;
display: block;
font-weight: 400;
margin-bottom: 34px;
}
}
================================================
FILE: assets/stencil/components/ionic-bar-chart/ionic-bar-chart.tsx
================================================
import {
Component,
// Element,
Prop,
// State,
h
} from '@stencil/core';
@Component({
tag: 'ionic-bar-chart',
styleUrl: 'ionic-bar-chart.scss',
shadow: false
})
export class IonicBarChart {
@Prop() data:string;
@Prop() color:string;
constructor() {
}
componentWillLoad() {
}
componentDidLoad() {
}
hexToRgb(hex) {
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
hex = hex.replace(shorthandRegex, function(_, r, g, b) {
return r + r + g + g + b + b;
});
var result = /^\s?#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ?
`${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ` +
`${parseInt(result[3], 16)}` : null;
}
prepareData() {
let max = 0;
const color = this.color ? this.color.split(',') : ['#92E1A7', '#51A7FF'];
const dataObj = JSON.parse(this.data.replace(/'/g, '"'));
return Object.keys(dataObj).map((key) => {
if (max < dataObj[key]) {
max = dataObj[key];
}
return {
name: key,
value: parseInt(dataObj[key], 10)
}
}).map((item, i) => {
return {
...item,
styles: {
bar: {
width:`${Math.round((item.value/max) * 100) }%`,
background: i > 1 ?
// semi-greyed-out after the first two
`rgba(91,112,139) linear-gradient(to right, ${color.map(item =>
`rgba(${this.hexToRgb(item)}, .2)`
).join(', ')})` :
`linear-gradient(to right, ${color.join(', ')})`
},
text: {
color: i > 1 ? '#5B708B' : color[color.length - 1]
}
}
}
});
}
render() {
return [
this.results && this.results.length > 5 ?
null : e.preventDefault()}>
,
-
{this.results.map(result =>
- {result.title} )} {this.results.length === 0 ?
- No results : null}
×
];
}
}
================================================
FILE: assets/stencil/components/ionic-sub-header/ionic-sub-header.scss
================================================
@import "../../vars";
ionic-sub-header {
font-family: $font-family-inter;
position: sticky;
top: 0;
top: -0.5px;
z-index: 99;
backdrop-filter: blur(20px);
transition: 0.2s box-shadow;
&.ionic-sub-header--initialized {
transition: background-color 0.4s ease, box-shadow 0.4s ease;
&:not(.ionic-sub-header--stuck) {
backdrop-filter: none;
}
}
&__trigger {
position: absolute;
left: 0;
width: 100vw;
height: 1px;
pointer-events: none;
opacity: 0;
@media (max-width: $screen-xs-max) {
top: 0;
}
}
&.ionic-sub-header--not-sticky {
position: relative;
&.ionic-sub-header--stuck {
background: none;
box-shadow: none;
backdrop-filter: none;
}
}
&.ionic-sub-header--stuck {
background: #020814;
box-shadow: 0 1px 0px rgba(black, 0.06);
@supports (
(-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))
) {
background: rgba(#020814, 0.8);
}
}
& > .container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
color: white;
font-size: 13px;
font-weight: 500;
min-height: 55px;
// flex-wrap: wrap;
overflow-x: auto;
position: relative;
z-index: 1;
&::before {
border-top: 1px solid rgba(white, 0.06);
display: block;
content: "";
position: absolute;
top: 0;
right: 15px;
left: 15px;
flex: 0 0 100%;
@media (max-width: $screen-xs-max) {
display: none;
}
}
&::after {
display: none;
}
}
ul {
padding: 0;
list-style: none;
margin-bottom: 0;
display: flex;
align-items: center;
font-size: 12px;
line-height: 14px;
letter-spacing: -0.02em;
font-weight: 400;
}
li {
display: flex;
align-items: center;
}
[slot="right"] li:last-child a:not(.btn) {
padding-right: 0;
}
ul:not([slot="right"]) li:first-child a,
[slot="left"] li:first-child a,
[slot="title"] {
padding-left: 0;
}
ul {
font-size: 13px;
line-height: 14px;
}
[slot="title"] {
// same as .sub-header__breadcrumbs li:last-child a
font-size: 16px;
font-weight: 600;
line-height: 22px;
letter-spacing: -0.03em;
padding-top: 0;
padding-bottom: 0;
&:hover {
color: white;
}
}
[slot="breadcrumbs"] li {
&::after {
content: "/";
color: rgba(white, 0.1);
font-size: 16px;
font-weight: 400;
vertical-align: 0px;
}
a {
padding-left: 8px;
padding-right: 8px;
color: rgba(white, 0.6);
}
&:last-child {
a {
font-weight: 600;
color: white;
}
&::after {
display: none;
}
}
}
span,
a {
color: white;
fill: white;
position: relative;
letter-spacing: 0;
padding: 16px 12px;
display: inline-block;
text-decoration: none;
white-space: nowrap;
transition: 0.2s color;
&.has-icon {
padding-left: 32px;
}
ion-icon {
font-size: 1.4em;
position: absolute;
left: 12px;
top: 14px;
}
}
a {
cursor: pointer;
svg,
path {
transition: 0.2s fill;
vertical-align: -15%;
}
&.active {
pointer-events: none;
}
&:hover,
&:active,
&:focus {
text-decoration: none;
}
&.current,
&.active,
&:hover {
color: rgba(white, 0.4);
}
&.btn {
padding: 5px 10px 6px;
border-radius: 6px;
color: white;
font-size: 13px;
font-weight: 600;
vertical-align: 0px;
letter-spacing: -0.01em;
margin-right: 3px;
margin-left: 9px;
box-shadow: none;
transition: 0.3s box-shadow, 0.3s background;
&:hover {
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
}
&:active {
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
}
}
}
.ionic-sub-header__mobile-toggle {
display: none;
}
@media (max-width: $screen-xs-max) {
&.hydrated.ionic-sub-header--initialized {
max-height: 55px;
background: transparent;
}
> .container {
max-height: 55px;
transition: 0.4s max-height ease;
background: black;
backdrop-filter: blur(20px);
@supports (
(-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))
) {
background: rgba(black, 0.9);
}
}
&,
& > .container {
overflow: visible;
perspective: 1000px;
}
span,
a {
ion-icon {
font-size: 1.4em;
position: static;
vertical-align: -3px;
}
}
.ionic-sub-header__mobile-toggle {
display: block;
margin-top: 2px;
cursor: pointer;
transform-style: preserve-3d;
transition: 0.4s transform cubic-bezier(0.07, 0.65, 0.57, 1.66);
svg path {
stroke-dasharray: 955;
stroke-dashoffset: 955;
transition: stroke-dashoffset 0.4s linear forwards;
}
&:hover {
color: inherit;
}
}
[slot="right"] {
flex: 100%;
// position: absolute;
// background: white;
// left: 0;
// top: 55px;
// width: 100vw;
padding: 0 16px 16px;
display: flex;
flex-direction: column;
justify-content: stretch;
align-items: stretch;
// box-shadow: 0 1px 0px rgba(black, .06);
// backdrop-filter: blur(20px);
// @supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
// background: rgba(white, .8);
// }
transform: scaleY(0);
transform-origin: top;
transition: transform 0.4s ease 0.3s;
li {
display: block;
opacity: 0;
transform: translateX(15px);
transition: transform 0.4s step-end 0s, opacity 0.4s ease 0s;
}
a {
width: 100%;
padding-left: 0;
padding-right: 0;
}
.btn {
margin-top: 16px;
text-align: center;
margin-left: 0;
border-radius: 4px;
}
}
&.ionic-sub-header--mobile-active {
// box-shadow: none;
> .container {
box-shadow: 0 1px 0px rgba(black, 0.06);
transition: 0.4s max-height ease;
max-height: 600px;
}
.ionic-sub-header__mobile-toggle {
transform: rotateZ(180deg);
}
[slot="right"] {
transform: scaleY(1);
transition: transform 0.4s ease 0s;
li {
transform: translateX(0);
opacity: 1;
transition: 0.4s transform 0.2s ease, 0.4s opacity 0.2s ease;
&:nth-child(2) {
transition-delay: 0.3s;
}
&:nth-child(3) {
transition-delay: 0.4s;
}
&:nth-child(4) {
transition-delay: 0.5s;
}
&:nth-child(5) {
transition-delay: 0.6s;
}
}
}
}
& > .container {
flex-wrap: wrap;
}
}
}
body.light ionic-sub-header {
&.ionic-sub-header--stuck {
background: white;
@supports (
(-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))
) {
background: rgba(white, 0.9);
}
}
.container::before {
border-top-color: rgba(black, 0.06);
}
span,
a {
color: #414d5c;
fill: #414d5c;
}
.btn,
.btn:hover {
color: white;
}
.btn.white {
color: #4d8dff;
border: 1px solid #e9edf3;
box-shadow: 0px 1px 2px rgba(0, 16, 46, 0.04);
border-radius: 6px;
padding-bottom: 6px;
&:hover {
box-shadow: 0px 2px 4px rgba(0, 16, 46, 0.08);
}
&:active,
&:focus {
box-shadow: inset 0px 1px 2px rgba(0, 16, 46, 0.04);
}
}
[slot="breadcrumbs"] li {
&:after {
color: rgba(#414d5c, 0.2);
}
&:not(:last-child) a {
color: rgba(#414d5c, 0.6);
&:hover {
color: $blue;
}
}
}
[slot="breadcrumbs"],
[slot="title"] {
&,
a {
color: #1a232f;
&:hover {
color: #1a232f;
}
}
}
a {
&.current,
&.active {
color: #b1bbca;
}
&:hover {
color: $blue;
svg,
path {
fill: $blue;
}
}
&.ionic-sub-header__mobile-toggle:hover {
svg,
path {
fill: unset;
}
}
}
@media (max-width: $screen-xs-max) {
> .container {
background: white;
@supports (
(-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))
) {
background: rgba(white, 0.9);
}
}
}
}
================================================
FILE: assets/stencil/components/ionic-sub-header/ionic-sub-header.tsx
================================================
import { Component, Element, Prop, State, h } from '@stencil/core';
import { ChevronDown } from '../../icons';
@Component({
tag: 'ionic-sub-header',
styleUrl: 'ionic-sub-header.scss',
shadow: false
})
export class IonicSubHeader {
@Prop() darkMode = true;
@State() mobileDropdownActive = false;
@State() stuck = false;
@State() queued = false;
@Element() el;
observer: IntersectionObserver;
constructor() {
this.handleMobileToggleClick = this.handleMobileToggleClick.bind(this);
}
getTriggerEl() {
// return ()
const trigger = document.createElement('div');
trigger.id = 'ionic-sub-header__trigger';
return trigger;
}
componentDidLoad() {
this.el.before(this.getTriggerEl());
this.init();
requestAnimationFrame(()=>{
this.el.classList.add('ionic-sub-header--initialized');
})
}
init() {
this.observer = new IntersectionObserver(entries => {
if (this.queued) return;
// no intersection with screen
if(!this.stuck && entries[0].intersectionRatio === 0) {
this.queued = true;
requestAnimationFrame(() => {
this.el.classList.add('ionic-sub-header--stuck');
this.stuck = true;
this.queued = false;
});
// fully intersects with screen
} else if(this.stuck && entries[0].intersectionRatio === 1) {
this.queued = true;
requestAnimationFrame(() => {
this.el.classList.remove('ionic-sub-header--stuck');
this.stuck = false;
this.queued = false;
})
}
}, { threshold: [0,1] })
if (this.el) {
this.observer.observe(document.getElementById('ionic-sub-header__trigger'));
setTimeout(() => {
this.el.classList.add('ionic-sub-header--initialized');
document.querySelector('.navbar-default').classList.add('navbar--not-fixed');
}, 405)
}
}
handleMobileToggleClick() {
this.el.classList.toggle('ionic-sub-header--mobile-active');
}
render() {
return (
);
}
}
================================================
FILE: assets/stencil/components/ionic-switcher/ionic-switcher.scss
================================================
ionic-switcher {
.switcher {
display: flex;
justify-content: center;
align-items: center;
user-select: none;
width: 100%;
.empty-circle {
display: inline-block;
vertical-align: middle;
width: 10px;
height: 10px;
border-radius: 10px;
border: 1px solid var(--c-carbon-900);
}
.switcher-separator {
display: inline-block;
width: 22px;
height: 1px;
margin: 0px 6px;
background-color: var(--c-indigo-400);
}
.switcher-button {
text-align: left;
color: #020814;
width: auto;
position: relative;
ion-icon,
.empty-circle {
vertical-align: middle;
margin-right: 7px;
margin-bottom: 1px;
}
&.switcher-button-completed {
&:after {
background-color: var(--c-blue-800);
}
color: #3880ff;
ion-icon {
color: #3880ff;
fill: #3880ff;
stroke: #3880ff;
}
}
&.switcher-button-inactive {
color: #92a1b3;
.empty-circle {
border-color: var(--c-indigo-400);
}
}
}
}
}
================================================
FILE: assets/stencil/components/ionic-switcher/ionic-switcher.tsx
================================================
import { Component, h, Prop } from "@stencil/core";
@Component({
tag: "ionic-switcher",
styleUrl: "ionic-switcher.scss",
shadow: false,
})
export class IonicSwitcher {
@Prop() items: string;
@Prop() index: number;
render() {
const { index } = this;
const items = this.items.split(",");
return (
{items.map((item, i) => {
const completed = i < index;
const inactive = i > index;
return [
,
i < items.length - 1 ? : null,
];
})}
);
}
}
================================================
FILE: assets/stencil/components/ionic-toggle/ionic-toggle-button.scss
================================================
:host {
flex: 1;
display: flex;
text-decoration: none;
cursor: pointer;
border: 1px solid #eee;
text-align: center;
font-size: 14px;
}
div {
padding: 16px;
flex: 1;
}
:host(:last-child) {
border-left: none;
}
:host(.selected) {
background-color: #4F8EF7;
color: white;
font-weight: bold;
}
================================================
FILE: assets/stencil/components/ionic-toggle/ionic-toggle-button.tsx
================================================
import { Component, Event, Prop, State, EventEmitter, Method, h } from '@stencil/core';
@Component({
tag: 'ionic-toggle-button',
styleUrl: 'ionic-toggle-button.scss',
shadow: true
})
export class IonicToggleButton {
@Event() toggleSelected: EventEmitter;
@Prop() title: string;
@Prop() tab: string;
@State() selected = false;
@Method()
deselect() {
this.selected = false;
}
@Method()
select() {
this.selected = true;
}
handleSelected() {
this.toggleSelected.emit(this);
}
hostData() {
return {
class: {
selected: this.selected
}
}
}
render() {
return (
this.handleSelected()}>
{this.title}
);
}
}
================================================
FILE: assets/stencil/components/ionic-toggle/ionic-toggle-tab.tsx
================================================
import { Component, Prop, Method, State, h } from '@stencil/core';
@Component({
tag: 'ionic-toggle-tab',
styles: `
`,
shadow: true
})
export class IonicToggleTab {
@Prop() tab: string;
@State() hidden = true;
@Method()
hide() {
this.hidden = true;
}
@Method()
show() {
this.hidden = false;
}
hostData() {
return {
style: {
display: this.hidden ? 'none' : 'block'
}
}
}
render() {
return (
-
{Object.keys(this.markup).map((key) => (
-
-
{Object.keys(this.markup).map(key => (
- {this.activeView === 'code' ? this.renderCode(this.markup[key].display) : null} ))}
Here’s a small text description for the card component. Nothing more, nothing less.
Discover
Music we think you'll love.
{album.title}
{album.artist}, {album.year}
Beast Epic
Iron & Wine, 2017
Good At Falling
The Japanese House, 2019
Hallucinogen
Kelela, 2015
22, A Million
Bon Iver, 2016
4 Walls
f(x), 2015
this.setFocus(true)}
onBlur={this.handleBlur}
/>
,
message &&
];
}
}
================================================
FILE: assets/stencil/components/ui/tip/tip.scss
================================================
ui-tip {
display: contents;
cursor: pointer;
}
ui-tip.is-active:after {
opacity: 1;
transition: opacity 150ms;
transition-delay: 100ms;
}
ui-tip:after {
background-color: var(--c-black);
border: solid 1px var(--c-gray-30);
border-radius: 4px;
color: var(--c-grey-400);
content: attr(text);
font-family: var(--font-family);
font-size: 12px;
text-transform: none;
line-height: 1;
opacity: 0;
padding: 0.75em;
pointer-events: none;
position: fixed;
transition: opacity 75ms;
white-space: nowrap;
z-index: 1000;
}
ui-tip.bottom:after {
left: calc(var(--target-left) + (var(--target-width) / 2) + var(--tip-adjustment-x, 0px));
top: calc(var(--target-bottom) - var(--tip-adjustment-y, 0px));
transform: translate(-50%, 0);
}
ui-tip.right:after {
left: calc(var(--target-right) + var(--tip-adjustment-x, 0px));
top: calc(var(--target-top) + (var(--target-height) / 2) - var(--tip-adjustment-y, 0px));
transform: translate(0, -50%);
}
ui-tip.top:after {
left: calc(var(--target-left) + (var(--target-width) / 2) + var(--tip-adjustment-x, 0px));
top: calc(var(--target-top) - var(--tip-adjustment-y, 0px));
transform: translate(-50%, -100%);
}
ui-tip.left:after {
left: calc(var(--target-left) + var(--tip-adjustment-x, 0px));
top: calc(var(--target-top) + (var(--target-height) / 2) - var(--tip-adjustment-y, 0px));
transform: translate(-100%, -50%);
}
================================================
FILE: assets/stencil/components/ui/tip/tip.tsx
================================================
import { Component, Element, Listen, State, Prop, h } from '@stencil/core';
const defaultBounds: ClientRect = {
top: 0,
right: 0,
bottom: 0,
left: 0,
width: 0,
height: 0,
};
@Component({
tag: 'ui-tip',
styleUrl: 'tip.scss'
})
export class UiTip {
@Prop({ reflect: true }) text: string;
@Prop({ reflect: true }) disabled = false;
@Prop() position: 'top' | 'right' | 'bottom' | 'left' = 'bottom';
@State() isActive = false;
@State() bounds: ClientRect;
@Element() element: HTMLElement;
@Listen('mouseenter')
handleMouseEnter() {
if (!this.disabled && this.element.firstElementChild) {
this.bounds = this.getBounds(this.element.firstElementChild);
this.isActive = true;
}
}
@Listen('mousedown')
@Listen('mouseleave')
handleMouseLeave() {
this.isActive = false;
}
getBounds(element: Element): ClientRect {
return element.getBoundingClientRect();
}
hostData() {
const { bounds = defaultBounds } = this;
return {
class: {
'is-active': this.isActive,
[this.position]: true,
},
style: {
'--target-top': `${bounds.top}px`,
'--target-right': `${bounds.right}px`,
'--target-bottom': `${bounds.bottom}px`,
'--target-left': `${bounds.left}px`,
'--target-width': `${bounds.width}px`,
'--target-height': `${bounds.height}px`,
},
'aria-label': this.text,
};
}
render() {
return
);
};
render() {
return (
-
{Object.keys(this.markup).map((key) => (
- {this.activeView === "code" ? this.renderCode(this.markup[key].display) : null} ))}
Here’s a small text description for the card component. Nothing more, nothing less.
{{album.title}}
{{album.artist}}, {{album.year}}
Beast Epic
Iron & Wine, 2017
Good At Falling
The Japanese House, 2019
Hallucinogen
Kelela, 2015
22, A Million
Bon Iver, 2016
4 Walls
f(x), 2015
{children}
);
================================================
FILE: assets/stencil/icons.tsx
================================================
import { h } from '@stencil/core';
export const Close = () => (
);
export const ChevronDown = () => (
);
export const EmailIcon = () => (
);
export const EmailOutlineIcon = () => (
);
export const ForwardIcon = () => (
);
export const LogoBlog = () => (
);
================================================
FILE: assets/stencil/index.d.ts
================================================
// declare module "*.svg" {
// const content: any;
// export default content;
// }
================================================
FILE: assets/stencil/index.html
================================================
Ooops. The page you're looking for got lost in space.
The address might be mistyped or the page may have moved.
Take me back home
*
`,
* directives: [IONIC_DIRECTIVES]
* })
* class MyCustomCheckbox {}
*```
* Alternatively, you could:
*
* ```ts
* import {Checkbox, Icon} from 'ionic/ionic'
* ```
*
* along with any other components and add them individually:
*
* ```
* @Component({
* ...
* directives: [Checkbox, Icon]
* })
* ```
*
* However, using IONIC_DIRECTIVES will always *Just Work* with no
* performance overhead, so there is really no reason to not always use it.
*
* Pages have their content automatically wrapped in `' + '
',
host: {
'role': 'dialog'
},
directives: [NgFor, NgIf, Icon]
}), __metadata('design:paramtypes', [typeof (_a = typeof ViewController !== 'undefined' && ViewController) === 'function' && _a || Object, typeof (_b = typeof Config !== 'undefined' && Config) === 'function' && _b || Object, typeof (_c = typeof NavParams !== 'undefined' && NavParams) === 'function' && _c || Object, typeof (_d = typeof Renderer !== 'undefined' && Renderer) === 'function' && _d || Object])], ActionSheetCmp);
ActionSheetSlideIn = (function (_Animation) {
_inherits(ActionSheetSlideIn, _Animation);
function ActionSheetSlideIn(enteringView, leavingView, opts) {
_classCallCheck(this, ActionSheetSlideIn);
_get(Object.getPrototypeOf(ActionSheetSlideIn.prototype), "constructor", this).call(this, null, opts);
var ele = enteringView.pageRef().nativeElement;
var backdrop = new Animation(ele.querySelector('.backdrop'));
var wrapper = new Animation(ele.querySelector('.action-sheet-wrapper'));
backdrop.fromTo('opacity', 0.01, 0.4);
wrapper.fromTo('translateY', '100%', '0%');
this.easing('cubic-bezier(.36,.66,.04,1)').duration(400).add([backdrop, wrapper]);
}
return ActionSheetSlideIn;
})(Animation);
Animation.register('action-sheet-slide-in', ActionSheetSlideIn);
ActionSheetSlideOut = (function (_Animation2) {
_inherits(ActionSheetSlideOut, _Animation2);
function ActionSheetSlideOut(enteringView, leavingView, opts) {
_classCallCheck(this, ActionSheetSlideOut);
_get(Object.getPrototypeOf(ActionSheetSlideOut.prototype), "constructor", this).call(this, null, opts);
var ele = leavingView.pageRef().nativeElement;
var backdrop = new Animation(ele.querySelector('.backdrop'));
var wrapper = new Animation(ele.querySelector('.action-sheet-wrapper'));
backdrop.fromTo('opacity', 0.4, 0);
wrapper.fromTo('translateY', '0%', '100%');
this.easing('cubic-bezier(.36,.66,.04,1)').duration(300).add([backdrop, wrapper]);
}
return ActionSheetSlideOut;
})(Animation);
Animation.register('action-sheet-slide-out', ActionSheetSlideOut);
ActionSheetMdSlideIn = (function (_Animation3) {
_inherits(ActionSheetMdSlideIn, _Animation3);
function ActionSheetMdSlideIn(enteringView, leavingView, opts) {
_classCallCheck(this, ActionSheetMdSlideIn);
_get(Object.getPrototypeOf(ActionSheetMdSlideIn.prototype), "constructor", this).call(this, null, opts);
var ele = enteringView.pageRef().nativeElement;
var backdrop = new Animation(ele.querySelector('.backdrop'));
var wrapper = new Animation(ele.querySelector('.action-sheet-wrapper'));
backdrop.fromTo('opacity', 0.01, 0.26);
wrapper.fromTo('translateY', '100%', '0%');
this.easing('cubic-bezier(.36,.66,.04,1)').duration(450).add([backdrop, wrapper]);
}
return ActionSheetMdSlideIn;
})(Animation);
Animation.register('action-sheet-md-slide-in', ActionSheetMdSlideIn);
ActionSheetMdSlideOut = (function (_Animation4) {
_inherits(ActionSheetMdSlideOut, _Animation4);
function ActionSheetMdSlideOut(enteringView, leavingView, opts) {
_classCallCheck(this, ActionSheetMdSlideOut);
_get(Object.getPrototypeOf(ActionSheetMdSlideOut.prototype), "constructor", this).call(this, null, opts);
var ele = leavingView.pageRef().nativeElement;
var backdrop = new Animation(ele.querySelector('.backdrop'));
var wrapper = new Animation(ele.querySelector('.action-sheet-wrapper'));
backdrop.fromTo('opacity', 0.26, 0);
wrapper.fromTo('translateY', '0%', '100%');
this.easing('cubic-bezier(.36,.66,.04,1)').duration(450).add([backdrop, wrapper]);
}
return ActionSheetMdSlideOut;
})(Animation);
Animation.register('action-sheet-md-slide-out', ActionSheetMdSlideOut);
}
};
});
System.register("ionic/components/alert/alert", ["angular2/core", "angular2/common", "../nav/nav-controller", "../nav/view-controller", "../../config/config", "../../animations/animation", "../../util/util"], function (_export) {
/**
* @name Alert
* @description
* An Alert is a dialog that presents users with either information, or used
* to receive information from the user using inputs. An alert appears on top
* of the app's content, and must be manually dismissed by the user before
* they can resume interaction with the app.
*
* An alert is created from an array of `buttons` and optionally an array of
* `inputs`. Each button includes properties for its `text`, and optionally a
* `handler`. If a handler returns `false` then the alert will not be dismissed.
* An alert can also optionally have a `title`, `subTitle` and `body`.
*
* All buttons will show up in the order they have been added to the `buttons`
* array, from left to right. Note: The right most button (the last one in the
* array) is the main button.
*
* Alerts can also include inputs whos data can be passed back to the app.
* Inputs can be used to prompt users for information.
*
* Its shorthand is to add all the alert's options from within the
* `Alert.create(opts)` first argument. Otherwise the alert's
* instance has methods to add options, such as `setTitle()` or `addButton()`.
*
* @usage
* ```ts
* constructor(nav: NavController) {
* this.nav = nav;
* }
*
* presentAlert() {
* let alert = Alert.create({
* title: 'Low battery',
* subTitle: '10% of battery remaining',
* buttons: ['Dismiss']
* });
* this.nav.present(alert);
* }
*
* presentConfirm() {
* let alert = Alert.create({
* title: 'Confirm purchase',
* body: 'Do you want to buy this book?',
* buttons: [
* {
* text: 'Cancel',
* handler: () => {
* console.log('Cancel clicked');
* }
* },
* {
* text: 'Buy',
* handler: () => {
* console.log('Buy clicked');
* }
* }
* ]
* });
* this.nav.present(alert);
* }
*
* presentPrompt() {
* let alert = Alert.create({
* title: 'Login',
* inputs: [
* {
* name: 'username',
* placeholder: 'Username'
* },
* {
* name: 'password',
* placeholder: 'Password',
* type: 'password'
* }
* ],
* buttons: [
* {
* text: 'Cancel',
* handler: data => {
* console.log('Cancel clicked');
* }
* },
* {
* text: 'Login',
* handler: data => {
* if (User.isValid(data.username, data.password)) {
* // logged in!
* } else {
* // invalid login
* return false;
* }
* }
* }
* ]
* });
* this.nav.present(alert);
* }
* ```
*
*/
"use strict";
var Component, ElementRef, Renderer, NgClass, NgIf, NgFor, NavParams, ViewController, Config, Animation, isDefined, __decorate, __metadata, Alert, AlertCmp, AlertPopIn, AlertPopOut, AlertMdPopIn, AlertMdPopOut, _a, _b, _c, _d, _e;
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
var _get = function get(_x3, _x4, _x5) { var _again = true; _function: while (_again) { var object = _x3, property = _x4, receiver = _x5; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x3 = parent; _x4 = property; _x5 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
return {
setters: [function (_angular2Core) {
Component = _angular2Core.Component;
ElementRef = _angular2Core.ElementRef;
Renderer = _angular2Core.Renderer;
}, function (_angular2Common) {
NgClass = _angular2Common.NgClass;
NgIf = _angular2Common.NgIf;
NgFor = _angular2Common.NgFor;
}, function (_navNavController) {
NavParams = _navNavController.NavParams;
}, function (_navViewController) {
ViewController = _navViewController.ViewController;
}, function (_configConfig) {
Config = _configConfig.Config;
}, function (_animationsAnimation) {
Animation = _animationsAnimation.Animation;
}, function (_utilUtil) {
isDefined = _utilUtil.isDefined;
}],
execute: function () {
__decorate = undefined && undefined.__decorate || function (decorators, target, key, desc) {
var c = arguments.length,
r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
__metadata = undefined && undefined.__metadata || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
Alert = (function (_ViewController) {
_inherits(Alert, _ViewController);
function Alert() {
var opts = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
_classCallCheck(this, Alert);
opts.inputs = opts.inputs || [];
opts.buttons = opts.buttons || [];
_get(Object.getPrototypeOf(Alert.prototype), "constructor", this).call(this, AlertCmp, opts);
this.viewType = 'alert';
}
/**
* @private
*/
/**
* @private
*/
_createClass(Alert, [{
key: "getTransitionName",
value: function getTransitionName(direction) {
var key = direction === 'back' ? 'alertLeave' : 'alertEnter';
return this._nav && this._nav.config.get(key);
}
/**
* @param {string} title Alert title
*/
}, {
key: "setTitle",
value: function setTitle(title) {
this.data.title = title;
}
/**
* @param {string} subTitle Alert subtitle
*/
}, {
key: "setSubTitle",
value: function setSubTitle(subTitle) {
this.data.subTitle = subTitle;
}
/**
* @param {string} body Alert body content
*/
}, {
key: "setBody",
value: function setBody(body) {
this.data.body = body;
}
/**
* @param {Object} input Alert input
*/
}, {
key: "addInput",
value: function addInput(input) {
this.data.inputs.push(input);
}
/**
* @param {Object} button Alert button
*/
}, {
key: "addButton",
value: function addButton(button) {
this.data.buttons.push(button);
}
/**
* @param {Object} opts Alert options
*/
}], [{
key: "create",
value: function create() {
var opts = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
return new Alert(opts);
}
}]);
return Alert;
})(ViewController);
_export("Alert", Alert);
AlertCmp = (function () {
function AlertCmp(_viewCtrl, _elementRef, _config, params, renderer) {
_classCallCheck(this, AlertCmp);
this._viewCtrl = _viewCtrl;
this._elementRef = _elementRef;
this._config = _config;
this.d = params.data;
if (this.d.cssClass) {
renderer.setElementClass(_elementRef, this.d.cssClass, true);
}
}
_createClass(AlertCmp, [{
key: "click",
value: function click(button) {
var _this = this;
var shouldDismiss = true;
if (button.handler) {
// a handler has been provided, execute it
// pass the handler the values from the inputs
if (button.handler(this.getValues()) === false) {
// if the return value of the handler is false then do not dismiss
shouldDismiss = false;
}
}
if (shouldDismiss) {
setTimeout(function () {
_this.dismiss();
}, this._config.get('pageTransitionDelay'));
}
}
}, {
key: "dismiss",
value: function dismiss() {
this._viewCtrl.dismiss(this.getValues());
}
}, {
key: "getValues",
value: function getValues() {
var values = {};
this.d.inputs.forEach(function (input) {
values[input.name] = input.value;
});
return values;
}
}, {
key: "onPageLoaded",
value: function onPageLoaded() {
// normalize the data
this.d.buttons = this.d.buttons.map(function (button) {
if (typeof button === 'string') {
return { text: button };
}
return button;
});
this.d.inputs = this.d.inputs.map(function (input, index) {
return {
name: isDefined(input.name) ? input.name : index,
placeholder: isDefined(input.placeholder) ? input.placeholder : '',
type: input.type || 'text',
value: isDefined(input.value) ? input.value : ''
};
});
var self = this;
self.keyUp = function (ev) {
if (ev.keyCode === 13) {
// enter
console.debug('alert enter');
var button = self.d.buttons[self.d.buttons.length - 1];
self.click(button);
} else if (ev.keyCode === 27) {
console.debug('alert escape');
self.dismiss();
}
};
document.addEventListener('keyup', this.keyUp);
}
}, {
key: "onPageDidEnter",
value: function onPageDidEnter() {
document.activeElement && document.activeElement.blur();
if (this.d.inputs.length) {
var firstInput = this._elementRef.nativeElement.querySelector('input');
if (firstInput) {
firstInput.focus();
}
}
}
}, {
key: "onPageDidLeave",
value: function onPageDidLeave() {
document.removeEventListener('keyup', this.keyUp);
}
}]);
return AlertCmp;
})();
AlertCmp = __decorate([Component({
selector: 'ion-alert',
template: '' + '' + '
' + '' + '
' + '{{d.title}}
' + '{{d.subTitle}}
' + '' + '' + '' + '
' + '' + '
',
host: {
'role': 'dialog'
},
directives: [NgClass, NgIf, NgFor]
}), __metadata('design:paramtypes', [typeof (_a = typeof ViewController !== 'undefined' && ViewController) === 'function' && _a || Object, typeof (_b = typeof ElementRef !== 'undefined' && ElementRef) === 'function' && _b || Object, typeof (_c = typeof Config !== 'undefined' && Config) === 'function' && _c || Object, typeof (_d = typeof NavParams !== 'undefined' && NavParams) === 'function' && _d || Object, typeof (_e = typeof Renderer !== 'undefined' && Renderer) === 'function' && _e || Object])], AlertCmp);
/**
* Animations for alerts
*/
AlertPopIn = (function (_Animation) {
_inherits(AlertPopIn, _Animation);
function AlertPopIn(enteringView, leavingView, opts) {
_classCallCheck(this, AlertPopIn);
_get(Object.getPrototypeOf(AlertPopIn.prototype), "constructor", this).call(this, null, opts);
var ele = enteringView.pageRef().nativeElement;
var backdrop = new Animation(ele.querySelector('.backdrop'));
var wrapper = new Animation(ele.querySelector('.alert-wrapper'));
wrapper.fromTo('opacity', '0.01', '1').fromTo('scale', '1.1', '1');
backdrop.fromTo('opacity', '0.01', '0.3');
this.easing('ease-in-out').duration(200).add(backdrop, wrapper);
}
return AlertPopIn;
})(Animation);
Animation.register('alert-pop-in', AlertPopIn);
AlertPopOut = (function (_Animation2) {
_inherits(AlertPopOut, _Animation2);
function AlertPopOut(enteringView, leavingView, opts) {
_classCallCheck(this, AlertPopOut);
_get(Object.getPrototypeOf(AlertPopOut.prototype), "constructor", this).call(this, null, opts);
var ele = leavingView.pageRef().nativeElement;
var backdrop = new Animation(ele.querySelector('.backdrop'));
var wrapper = new Animation(ele.querySelector('.alert-wrapper'));
wrapper.fromTo('opacity', '1', '0').fromTo('scale', '1', '0.9');
backdrop.fromTo('opacity', '0.3', '0');
this.easing('ease-in-out').duration(200).add(backdrop, wrapper);
}
return AlertPopOut;
})(Animation);
Animation.register('alert-pop-out', AlertPopOut);
AlertMdPopIn = (function (_Animation3) {
_inherits(AlertMdPopIn, _Animation3);
function AlertMdPopIn(enteringView, leavingView, opts) {
_classCallCheck(this, AlertMdPopIn);
_get(Object.getPrototypeOf(AlertMdPopIn.prototype), "constructor", this).call(this, null, opts);
var ele = enteringView.pageRef().nativeElement;
var backdrop = new Animation(ele.querySelector('.backdrop'));
var wrapper = new Animation(ele.querySelector('.alert-wrapper'));
wrapper.fromTo('opacity', '0.01', '1').fromTo('scale', '1.1', '1');
backdrop.fromTo('opacity', '0.01', '0.5');
this.easing('ease-in-out').duration(200).add(backdrop, wrapper);
}
return AlertMdPopIn;
})(Animation);
Animation.register('alert-md-pop-in', AlertMdPopIn);
AlertMdPopOut = (function (_Animation4) {
_inherits(AlertMdPopOut, _Animation4);
function AlertMdPopOut(enteringView, leavingView, opts) {
_classCallCheck(this, AlertMdPopOut);
_get(Object.getPrototypeOf(AlertMdPopOut.prototype), "constructor", this).call(this, null, opts);
var ele = leavingView.pageRef().nativeElement;
var backdrop = new Animation(ele.querySelector('.backdrop'));
var wrapper = new Animation(ele.querySelector('.alert-wrapper'));
wrapper.fromTo('opacity', '1', '0').fromTo('scale', '1', '0.9');
backdrop.fromTo('opacity', '0.5', '0');
this.easing('ease-in-out').duration(200).add(backdrop, wrapper);
}
return AlertMdPopOut;
})(Animation);
Animation.register('alert-md-pop-out', AlertMdPopOut);
}
};
});
System.register("ionic/components/app/app", ["angular2/core", "angular2/platform/browser", "../../config/config", "../../util/click-block", "../../util/dom"], function (_export) {
/**
* @private
* Component registry service. For more information on registering
* components see the [IdRef API reference](../id/IdRef/).
*/
"use strict";
var Injectable, NgZone, Title, Config, ClickBlock, rafFrames, __decorate, __metadata, IonicApp, _a, _b, _c;
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
return {
setters: [function (_angular2Core) {
Injectable = _angular2Core.Injectable;
NgZone = _angular2Core.NgZone;
}, function (_angular2PlatformBrowser) {
Title = _angular2PlatformBrowser.Title;
}, function (_configConfig) {
Config = _configConfig.Config;
}, function (_utilClickBlock) {
ClickBlock = _utilClickBlock.ClickBlock;
}, function (_utilDom) {
rafFrames = _utilDom.rafFrames;
}],
execute: function () {
__decorate = undefined && undefined.__decorate || function (decorators, target, key, desc) {
var c = arguments.length,
r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
__metadata = undefined && undefined.__metadata || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
IonicApp = (function () {
function IonicApp(_config, _clickBlock, _zone) {
_classCallCheck(this, IonicApp);
this._config = _config;
this._clickBlock = _clickBlock;
this._zone = _zone;
this._titleSrv = new Title();
this._title = '';
this._disTime = 0;
this._scrollTime = 0;
// Our component registry map
this.components = {};
}
/**
* Sets the document title.
* @param {string} val Value to set the document title to.
*/
_createClass(IonicApp, [{
key: "setTitle",
value: function setTitle(val) {
var self = this;
if (val !== self._title) {
self._title = val;
this._zone.runOutsideAngular(function () {
function setAppTitle() {
self._titleSrv.setTitle(self._title);
}
rafFrames(4, setAppTitle);
});
}
}
/**
* @private
* Sets if the app is currently enabled or not, meaning if it's
* available to accept new user commands. For example, this is set to `false`
* while views transition, a modal slides up, an action-sheet
* slides up, etc. After the transition completes it is set back to `true`.
* @param {bool} isEnabled
* @param {bool} fallback When `isEnabled` is set to `false`, this argument
* is used to set the maximum number of milliseconds that app will wait until
* it will automatically enable the app again. It's basically a fallback incase
* something goes wrong during a transition and the app wasn't re-enabled correctly.
*/
}, {
key: "setEnabled",
value: function setEnabled(isEnabled) {
var duration = arguments.length <= 1 || arguments[1] === undefined ? 700 : arguments[1];
this._disTime = isEnabled ? 0 : Date.now() + duration;
if (duration > 32 || isEnabled) {
// only do a click block if the duration is longer than XXms
this._clickBlock.show(!isEnabled, duration + 64);
}
}
/**
* @private
* Boolean if the app is actively enabled or not.
* @return {bool}
*/
}, {
key: "isEnabled",
value: function isEnabled() {
return this._disTime < Date.now();
}
/**
* @private
*/
}, {
key: "setScrolling",
value: function setScrolling() {
this._scrollTime = Date.now();
}
/**
* @private
* Boolean if the app is actively scrolling or not.
* @return {bool}
*/
}, {
key: "isScrolling",
value: function isScrolling() {
return this._scrollTime + 64 > Date.now();
}
/**
* @private
* Register a known component with a key, for easy lookups later.
* @param {TODO} id The id to use to register the component
* @param {TODO} component The component to register
*/
}, {
key: "register",
value: function register(id, component) {
if (this.components[id] && this.components[id] !== component) {}
this.components[id] = component;
}
/**
* @private
* Unregister a known component with a key.
* @param {TODO} id The id to use to unregister
*/
}, {
key: "unregister",
value: function unregister(id) {
delete this.components[id];
}
/**
* @private
* Get a registered component with the given type (returns the first)
* @param {Object} cls the type to search for
* @return the matching component, or undefined if none was found
*/
}, {
key: "getRegisteredComponent",
value: function getRegisteredComponent(cls) {
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = this.components[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var component = _step.value;
if (component instanceof cls) {
return component;
}
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator["return"]) {
_iterator["return"]();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
}
/**
* @private
* Get the component for the given key.
* @param {TODO} key TODO
* @return {TODO} TODO
*/
}, {
key: "getComponent",
value: function getComponent(id) {
return this.components[id];
}
}]);
return IonicApp;
})();
_export("IonicApp", IonicApp);
_export("IonicApp", IonicApp = __decorate([Injectable(), __metadata('design:paramtypes', [typeof (_a = typeof Config !== 'undefined' && Config) === 'function' && _a || Object, typeof (_b = typeof ClickBlock !== 'undefined' && ClickBlock) === 'function' && _b || Object, typeof (_c = typeof NgZone !== 'undefined' && NgZone) === 'function' && _c || Object])], IonicApp));
}
};
});
System.register("ionic/components/app/id", ["angular2/core", "./app"], function (_export) {
/**
* @name Id
* @description
* IdRef is an easy way to identify unique components in an app and access them
* no matter where in the UI heirarchy you are. For example, this makes toggling
* a global side menu feasible from any place in the application.
*
* See the [Menu section](https://ionicframework.com/docs/v3/components/#menus) of
* the Component docs for an example of how Menus rely on ID's.
*
* @usage
* To give any component an ID, simply set its `id` property:
* ```html
* ' + '
' + '{{d.title}}
' + '{{d.subTitle}}
' + '{{d.body}}
' + '' + '
' + '' + '' + '' + '
' + '' + '' + ' ' + '
'
}), __param(3, Optional()), __metadata('design:paramtypes', [typeof (_a = typeof Form !== 'undefined' && Form) === 'function' && _a || Object, typeof (_b = typeof ElementRef !== 'undefined' && ElementRef) === 'function' && _b || Object, typeof (_c = typeof Renderer !== 'undefined' && Renderer) === 'function' && _c || Object, typeof (_d = typeof NgControl !== 'undefined' && NgControl) === 'function' && _d || Object])], Checkbox));
}
};
});
System.register("ionic/components/content/content", ["angular2/core", "../ion", "../app/app", "../../config/config", "../../util/dom", "../nav/view-controller", "../../animations/scroll-to"], function (_export) {
/**
* @name Content
* @description
* The Content component provides an easy to use content area that can be configured to use Ionic's custom Scroll View, or the built in overflow scrolling of the browser.
*
* While we recommend using the custom Scroll features in Ionic in most cases, sometimes (for performance reasons) only the browser's native overflow scrolling will suffice, and so we've made it easy to toggle between the Ionic scroll implementation and overflow scrolling.
*
* You can implement pull-to-refresh with the [Refresher](../../scroll/Refresher) component.
*
* @usage
* ```html
* ' + '' + '
' + '