+
+
+
+
+
+
+
+
+
+ {story.points || 0}
+
+ + {story.title} +
+this.comments(story)}> + Posted by {story.user} {story.time_ago} | {story.comments_count} comments +
+
+
+
+
+ );
+ }
+}
diff --git a/packages/ionic/src/fiber-demo/dot.tsx b/packages/ionic/src/fiber-demo/dot.tsx
new file mode 100644
index 0000000000..ce24b8820a
--- /dev/null
+++ b/packages/ionic/src/fiber-demo/dot.tsx
@@ -0,0 +1,53 @@
+import { Component, Prop, h, State } from '../index';
+import { VNodeData } from '../../util/interfaces';
+
+@Component({
+ tag: 'fiber-dot'
+})
+export class FiberDot {
+ @Prop() size: number;
+ @Prop() x: number;
+ @Prop() y: number;
+ @Prop() text: string;
+
+ @State() hover: boolean = false;
+
+ enter() {
+ this.hover = true;
+ }
+
+ leave() {
+ this.hover = false;
+ }
+
+ hostData(): VNodeData {
+ const s = this.size * 1.3;
+ const style = {
+ position: 'absolute',
+ font: 'normal 15px sans-serif',
+ textAlign: 'center',
+ cursor: 'pointer',
+ width: s + 'px',
+ height: s + 'px',
+ left: (this.x) + 'px',
+ top: (this.y) + 'px',
+ borderRadius: (s / 2) + 'px',
+ lineHeight: (s) + 'px',
+ background: this.hover ? '#ff0' : '#61dafb'
+ };
+
+ return {
+ style: style,
+ on: {
+ mouseenter: this.enter.bind(this),
+ mouseleave: this.leave.bind(this)
+ },
+ };
+ }
+
+ render() {
+ return (
+ this.hover ? '**' + this.text + '**' : this.text
+ );
+ }
+}
diff --git a/packages/ionic/src/fiber-demo/triangle.tsx b/packages/ionic/src/fiber-demo/triangle.tsx
new file mode 100644
index 0000000000..3a5924798d
--- /dev/null
+++ b/packages/ionic/src/fiber-demo/triangle.tsx
@@ -0,0 +1,51 @@
+import { Component, Prop, h } from '../index';
+
+var targetSize = 25;
+
+@Component({
+ tag: 'fiber-triangle',
+ shadow: false
+})
+export class FiberTriangle {
+
+ @Prop() x: number;
+ @Prop() y: number;
+ @Prop() s: number;
+ @Prop() seconds: number;
+
+ render() {
+ var s = this.s;
+ if (s <= targetSize) {
+ return (
+
+
+ ];
+ }
+}
diff --git a/packages/ionic/src/item-divider/item-divider.wp.scss b/packages/ionic/src/item-divider/item-divider.wp.scss
new file mode 100644
index 0000000000..41ec27e524
--- /dev/null
+++ b/packages/ionic/src/item-divider/item-divider.wp.scss
@@ -0,0 +1,53 @@
+@import "../../themes/ionic.globals.wp";
+@import "./item-divider";
+
+// Windows Item Divider
+// --------------------------------------------------
+
+/// @prop - Color for the divider
+$item-wp-divider-color: $list-wp-text-color !default;
+
+/// @prop - Background for the divider
+$item-wp-divider-background: #fff !default;
+
+/// @prop - Bodrer bottom for the divider
+$item-wp-divider-border-bottom: 1px solid $list-wp-border-color !default;
+
+/// @prop - Font size for the divider
+$item-wp-divider-font-size: 2rem !default;
+
+/// @prop - Padding start for the divider
+$item-wp-divider-padding-start: $item-wp-padding-start !default;
+
+
+// Windows Item Divider
+// --------------------------------------------------
+
+.item-divider-wp {
+ @include padding-horizontal($item-wp-divider-padding-start, null);
+
+ border-bottom: $item-wp-divider-border-bottom;
+ font-size: $item-wp-divider-font-size;
+
+ color: $item-wp-divider-color;
+ background-color: $item-wp-divider-background;
+}
+
+
+// Generate Windows Item Divider Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
+ .item-divider-wp-#{$color-name} {
+ color: $color-contrast;
+ background-color: $color-base;
+
+ p {
+ color: $color-contrast;
+ }
+
+ &.activated {
+ background-color: color-shade($color-base);
+ }
+ }
+}
\ No newline at end of file
diff --git a/packages/ionic/src/item/item.ios.scss b/packages/ionic/src/item/item.ios.scss
new file mode 100644
index 0000000000..7a1c481976
--- /dev/null
+++ b/packages/ionic/src/item/item.ios.scss
@@ -0,0 +1,273 @@
+@import "../../themes/ionic.globals.ios";
+@import "./item";
+
+
+// iOS Item
+// --------------------------------------------------
+
+/// @prop - Font size of the item text
+$item-ios-body-text-font-size: 1.7rem !default;
+
+// deprecated
+$item-ios-paragraph-margin: null !default;
+
+/// @prop - Margin top of the item paragraph
+$item-ios-paragraph-margin-top: 0 !default;
+
+/// @prop - Margin end of the item paragraph
+$item-ios-paragraph-margin-end: 0 !default;
+
+/// @prop - Margin bottom of the item paragraph
+$item-ios-paragraph-margin-bottom: 2px !default;
+
+/// @prop - Margin start of the item paragraph
+$item-ios-paragraph-margin-start: $item-ios-paragraph-margin-end !default;
+
+/// @prop - Font size of the item paragraph
+$item-ios-paragraph-font-size: 1.4rem !default;
+
+/// @prop - Color of the item paragraph
+$item-ios-paragraph-text-color: #8e9093 !default;
+
+/// @prop - Size of the avatar in the item
+$item-ios-avatar-size: 36px !default;
+
+/// @prop - Border radius of the avatar in the item
+$item-ios-avatar-border-radius: 50% !default;
+
+/// @prop - Size of the thumbnail in the item
+$item-ios-thumbnail-size: 56px !default;
+
+/// @prop - Shows the detail arrow icon on an item
+$item-ios-detail-push-show: true !default;
+
+/// @prop - Color of the detail arrow icon
+$item-ios-detail-push-color: $list-ios-border-color !default;
+
+/// @prop - Icon for the detail arrow
+$item-ios-detail-push-svg: "" !default;
+
+/// @prop - Background for the divider
+$item-ios-divider-background: #f7f7f7 !default;
+
+/// @prop - Color for the divider
+$item-ios-divider-color: #222 !default;
+
+/// @prop - Padding for the divider
+$item-ios-divider-padding: 5px 15px !default;
+
+/// @prop - Background for the sliding content
+$item-ios-sliding-content-background: $list-ios-background-color !default;
+
+
+// iOS Item
+// --------------------------------------------------
+
+.item-ios {
+ @include padding-horizontal($item-ios-padding-start, null);
+ @include border-radius(0);
+
+ position: relative;
+
+ font-size: $item-ios-body-text-font-size;
+ color: $list-ios-text-color;
+ background-color: $list-ios-background-color;
+ transition: background-color 200ms linear;
+}
+
+.item-ios.activated {
+ background-color: $list-ios-activated-background-color;
+ transition-duration: 0ms;
+}
+
+.item-ios h1 {
+ @include margin(0, 0, 2px);
+
+ font-size: 2.4rem;
+ font-weight: normal;
+}
+
+.item-ios h2 {
+ @include margin(0, 0, 2px);
+
+ font-size: 1.7rem;
+ font-weight: normal;
+}
+
+.item-ios h3,
+.item-ios h4,
+.item-ios h5,
+.item-ios h6 {
+ @include margin(0, 0, 3px);
+
+ font-size: 1.4rem;
+ font-weight: normal;
+ line-height: normal;
+}
+
+.item-ios p {
+ overflow: inherit;
+
+ font-size: $item-ios-paragraph-font-size;
+ line-height: normal;
+ text-overflow: inherit;
+ color: $item-ios-paragraph-text-color;
+
+ @include deprecated-variable(margin, $item-ios-paragraph-margin) {
+ @include margin($item-ios-paragraph-margin-top, $item-ios-paragraph-margin-end, $item-ios-paragraph-margin-bottom, $item-ios-paragraph-margin-start);
+ }
+}
+
+.item-ios h2:last-child,
+.item-ios h3:last-child,
+.item-ios h4:last-child,
+.item-ios h5:last-child,
+.item-ios h6:last-child,
+.item-ios p:last-child {
+ @include margin(null, null, 0, null);
+}
+
+.item-ios.item-block .item-inner {
+ @include padding-horizontal(null, $item-ios-padding-end / 2);
+
+ border-bottom: $hairlines-width solid $list-ios-border-color;
+}
+
+
+// iOS Item Media
+// --------------------------------------------------
+
+.item-ios [slot="start"] {
+ @include margin($item-ios-padding-media-top, $item-ios-padding-start, $item-ios-padding-media-bottom, 0);
+}
+
+.item-ios [slot="end"] {
+ @include margin($item-ios-padding-media-top, ($item-ios-padding-start / 2), $item-ios-padding-media-bottom, ($item-ios-padding-end / 2));
+}
+
+.item-ios ion-icon[slot="start"],
+.item-ios ion-icon[slot="end"] {
+ @include margin($item-ios-padding-icon-top, null, $item-ios-padding-icon-bottom, 0);
+
+}
+
+.item-ios .item-button {
+ @include padding(0, .5em);
+
+ height: 24px;
+
+ font-size: 1.3rem;
+}
+
+.item-ios .item-button ion-icon[slot="icon-only"] {
+ @include padding(0, 1px);
+}
+
+.item-ios ion-avatar[slot="start"],
+.item-ios ion-thumbnail[slot="start"] {
+ @include margin(($item-ios-padding-end / 2), $item-ios-padding-end, ($item-ios-padding-end / 2), 0);
+}
+
+.item-ios ion-avatar[slot="end"],
+.item-ios ion-thumbnail[slot="end"] {
+ @include margin(($item-ios-padding-end / 2));
+}
+
+
+// iOS Item Avatar
+// --------------------------------------------------
+
+.item-ios ion-avatar {
+ min-width: $item-ios-avatar-size;
+ min-height: $item-ios-avatar-size;
+}
+
+.item-ios ion-avatar ion-img,
+.item-ios ion-avatar img {
+ @include border-radius($item-ios-avatar-border-radius);
+
+ overflow: hidden;
+
+ width: $item-ios-avatar-size;
+ height: $item-ios-avatar-size;
+}
+
+
+// iOS Item Thumbnail
+// --------------------------------------------------
+
+.item-ios ion-thumbnail {
+ min-width: $item-ios-thumbnail-size;
+ min-height: $item-ios-thumbnail-size;
+}
+
+.item-ios ion-thumbnail ion-img,
+.item-ios ion-thumbnail img {
+ width: $item-ios-thumbnail-size;
+ height: $item-ios-thumbnail-size;
+}
+
+
+// iOS Item Detail Push
+// --------------------------------------------------
+
+// Only show the forward arrow icon if true
+@if $item-ios-detail-push-show == true {
+ .item-ios[detail-push] .item-inner,
+ button.item-ios:not([detail-none]) .item-inner,
+ a.item-ios:not([detail-none]) .item-inner {
+ @include svg-background-image($item-ios-detail-push-svg, true);
+ @include padding-horizontal(null, 32px);
+ @include background-position(end, $item-ios-padding-end - 2, center);
+
+ background-repeat: no-repeat;
+ background-size: 14px 14px;
+ }
+}
+
+
+// iOS Item Group
+// --------------------------------------------------
+
+ion-item-group .item-ios:first-child .item-inner {
+ border-top-width: 0;
+}
+
+ion-item-group .item-ios:last-child .item-inner,
+ion-item-group .item-wrapper:last-child .item-ios .item-inner {
+ border: 0;
+}
+
+
+// Generate iOS Item and Item Divider Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
+ // If there is text with a color it should use this color
+ // and override whatever item sets it to
+ .item-ios .text-ios-#{$color-name} {
+ color: $color-base;
+ }
+
+ .item-ios-#{$color-name},
+ .item-divider-ios-#{$color-name} {
+ color: $color-contrast;
+ background-color: $color-base;
+
+ p {
+ color: $color-contrast;
+ }
+
+ &.activated {
+ background-color: color-shade($color-base);
+ }
+ }
+}
+
+
+// iOS Item Sliding
+// --------------------------------------------------
+
+.list-ios ion-item-sliding {
+ background-color: $item-ios-sliding-content-background;
+}
diff --git a/packages/ionic/src/item/item.md.scss b/packages/ionic/src/item/item.md.scss
new file mode 100644
index 0000000000..9f813799a5
--- /dev/null
+++ b/packages/ionic/src/item/item.md.scss
@@ -0,0 +1,268 @@
+@import "../../themes/ionic.globals.md";
+@import "./item";
+
+
+// Material Design Item
+// --------------------------------------------------
+
+/// @prop - Font size of the item text
+$item-md-body-text-font-size: 1.4rem !default;
+
+/// @prop - line height of the item text
+$item-md-body-text-line-height: 1.5 !default;
+
+/// @prop - Color of the item paragraph
+$item-md-paragraph-text-color: #666 !default;
+
+/// @prop - Font size of the item
+$item-md-font-size: 1.6rem !default;
+
+/// @prop - Size of the avatar in the item
+$item-md-avatar-size: 40px !default;
+
+/// @prop - Border radius of the avatar in the item
+$item-md-avatar-border-radius: 50% !default;
+
+/// @prop - Size of the thumbnail in the item
+$item-md-thumbnail-size: 80px !default;
+
+/// @prop - Shows the detail arrow icon on an item
+$item-md-detail-push-show: false !default;
+
+/// @prop - Color of the detail arrow icon
+$item-md-detail-push-color: $list-md-border-color !default;
+
+/// @prop - Icon for the detail arrow
+$item-md-detail-push-svg: "" !default;
+
+/// @prop - Color for the divider
+$item-md-divider-color: #858585 !default;
+
+/// @prop - Background for the divider
+$item-md-divider-background: #fff !default;
+
+/// @prop - Font size for the divider
+$item-md-divider-font-size: $item-md-body-text-font-size !default;
+
+/// @prop - Border bottom for the divider
+$item-md-divider-border-bottom: 1px solid $list-md-border-color !default;
+
+/// @prop - Padding for the divider
+$item-md-divider-padding: 5px 15px !default;
+
+/// @prop - Background for the sliding content
+$item-md-sliding-content-background: $list-md-background-color !default;
+
+
+.item-md {
+ @include padding-horizontal($item-md-padding-start, 0);
+
+ position: relative;
+
+ font-size: $item-md-font-size;
+ font-weight: normal;
+ text-transform: none;
+
+ color: $list-md-text-color;
+ background-color: $list-md-background-color;
+ box-shadow: none;
+ transition: background-color 300ms cubic-bezier(.4, 0, .2, 1);
+}
+
+.item-md.activated {
+ background-color: $list-md-activated-background-color;
+}
+
+.item-md[no-lines] {
+ border-width: 0;
+}
+
+.item-md h1 {
+ @include margin(0, 0, 2px);
+
+ font-size: 2.4rem;
+ font-weight: normal;
+}
+
+.item-md h2 {
+ @include margin(2px, 0);
+
+ font-size: 1.6rem;
+ font-weight: normal;
+}
+
+.item-md h3,
+.item-md h4,
+.item-md h5,
+.item-md h6 {
+ @include margin(2px, 0);
+
+ font-size: 1.4rem;
+ font-weight: normal;
+ line-height: normal;
+}
+
+.item-md p {
+ @include margin(0, 0, 2px);
+
+ overflow: inherit;
+
+ font-size: 1.4rem;
+ line-height: normal;
+ text-overflow: inherit;
+ color: $item-md-paragraph-text-color;
+}
+
+.item-md.item-block .item-inner {
+ @include padding-horizontal(null, ($item-md-padding-end / 2));
+
+ border-bottom: 1px solid $list-md-border-color;
+}
+
+
+// Material Design Item Detail Push
+// --------------------------------------------------
+
+// Only show the forward arrow icon if true
+@if $item-md-detail-push-show == true {
+ .item-md[detail-push] .item-inner,
+ button.item-md:not([detail-none]) .item-inner,
+ a.item-md:not([detail-none]) .item-inner {
+ @include svg-background-image($item-md-detail-push-svg, true);
+ @include padding-horizontal(null, 32px);
+ @include background-position(end, $item-md-padding-end - 2, center);
+
+ background-repeat: no-repeat;
+ background-size: 14px 14px;
+ }
+}
+
+
+// Material Design Item Media
+// --------------------------------------------------
+
+.item-md [slot="start"],
+.item-md [slot="end"] {
+ @include margin($item-md-padding-media-top, ($item-md-padding-end / 2), $item-md-padding-media-bottom, 0);
+}
+
+.item-md ion-icon[slot="start"],
+.item-md ion-icon[slot="end"] {
+ @include margin($item-md-padding-icon-top, null, $item-md-padding-icon-bottom, 0);
+}
+
+.item-md .item-button {
+ @include padding(0, .6em);
+
+ height: 25px;
+
+ font-size: 1.2rem;
+}
+
+.item-md .item-button ion-icon[slot="icon-only"] {
+ @include padding(0);
+}
+
+.item-md ion-icon[slot="start"] + .item-inner,
+.item-md ion-icon[slot="start"] + .item-input {
+ @include margin-horizontal($item-md-padding-start + ($item-md-padding-start / 2), null);
+}
+
+.item-md ion-avatar[slot="start"],
+.item-md ion-thumbnail[slot="start"] {
+ @include margin(($item-md-padding-end / 2), $item-md-padding-end, ($item-md-padding-end / 2), 0);
+}
+
+.item-md ion-avatar[slot="end"],
+.item-md ion-thumbnail[slot="end"] {
+ @include margin(($item-md-padding-end / 2));
+}
+
+
+// Material Design Item Avatar
+// --------------------------------------------------
+
+.item-md ion-avatar {
+ min-width: $item-md-avatar-size;
+ min-height: $item-md-avatar-size;
+}
+
+.item-md ion-avatar ion-img,
+.item-md ion-avatar img {
+ @include border-radius($item-md-avatar-border-radius);
+
+ overflow: hidden;
+
+ width: $item-md-avatar-size;
+ height: $item-md-avatar-size;
+}
+
+
+// Material Design Item Thumbnail
+// --------------------------------------------------
+
+.item-md ion-thumbnail {
+ min-width: $item-md-thumbnail-size;
+ min-height: $item-md-thumbnail-size;
+}
+
+.item-md ion-thumbnail ion-img,
+.item-md ion-thumbnail img {
+ width: $item-md-thumbnail-size;
+ height: $item-md-thumbnail-size;
+}
+
+
+// Material Design Item Group
+// --------------------------------------------------
+
+ion-item-group .item-md:first-child .item-inner {
+ border-top-width: 0;
+}
+
+ion-item-group .item-md:last-child .item-inner,
+ion-item-group .item-md .item-wrapper:last-child .item-inner {
+ border: 0;
+}
+
+
+// Generate Material Design Item and Item Divider Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
+ // If there is text with a color it should use this color
+ // and override whatever item sets it to
+ .item-md .text-md-#{$color-name} {
+ color: $color-base;
+ }
+
+ .item-md-#{$color-name},
+ .item-divider-md-#{$color-name} {
+ color: $color-contrast;
+ background-color: $color-base;
+
+ p {
+ color: $color-contrast;
+ }
+
+ &.activated {
+ background-color: color-shade($color-base);
+ }
+ }
+}
+
+
+// Material Design Item Sliding
+// --------------------------------------------------
+
+.list-md ion-item-sliding {
+ background-color: $item-md-sliding-content-background;
+}
+
+// Item reorder
+// --------------------------------------------------
+
+.item-md ion-reorder {
+ font-size: 1.5em;
+ opacity: .3;
+}
diff --git a/packages/ionic/src/item/item.scss b/packages/ionic/src/item/item.scss
new file mode 100644
index 0000000000..29cb451705
--- /dev/null
+++ b/packages/ionic/src/item/item.scss
@@ -0,0 +1,88 @@
+@import "../../themes/ionic.globals";
+
+// Item
+// --------------------------------------------------
+// Core structure only, dimensions belong in specific modes
+//
+// ".item" includes elements:
+// ion-item
+// [ion-item]
+// ion-item-divider
+// ion-list-header
+//
+// ".item-block" includes elements:
+// ion-item
+// [ion-item]
+
+ion-item {
+ display: block;
+
+ contain: content;
+}
+
+
+.item-block {
+ @include margin(0);
+ @include padding(0);
+ @include text-align(initial);
+
+ display: flex;
+ overflow: hidden;
+
+ align-items: center;
+ justify-content: space-between;
+
+ width: 100%;
+ min-height: 4.4rem;
+
+ border: 0;
+
+ font-weight: normal;
+ line-height: normal;
+ text-decoration: none;
+ color: inherit;
+}
+
+.item-inner {
+ @include margin(0);
+ @include padding(0);
+
+ display: flex;
+ overflow: hidden;
+
+ flex: 1;
+ flex-direction: inherit;
+ align-items: inherit;
+ align-self: stretch;
+
+ min-height: inherit;
+
+ border: 0;
+}
+
+.input-wrapper {
+ display: flex;
+ overflow: hidden;
+
+ flex: 1;
+ flex-direction: inherit;
+ align-items: inherit;
+ align-self: stretch;
+
+ text-overflow: ellipsis;
+}
+
+.item[no-lines],
+.item.item[no-lines] .item-inner {
+ border: 0;
+}
+
+ion-item-group {
+ display: block;
+}
+
+[vertical-align-top],
+ion-input.item {
+ align-items: flex-start;
+}
+
diff --git a/packages/ionic/src/item/item.tsx b/packages/ionic/src/item/item.tsx
new file mode 100644
index 0000000000..d2aaa6485a
--- /dev/null
+++ b/packages/ionic/src/item/item.tsx
@@ -0,0 +1,219 @@
+import { Component, Prop, h, Listen } from '../index';
+import { CssClassObject } from '../../util/interfaces';
+import { createThemedClasses } from '../../util/theme';
+
+
+@Component({
+ tag: 'ion-item',
+ styleUrls: {
+ ios: 'item.ios.scss',
+ md: 'item.md.scss',
+ wp: 'item.wp.scss'
+ }
+})
+export class Item {
+ $el: HTMLElement;
+ childStyles: CssClassObject = Object.create(null);
+
+ @Prop() mode: string;
+ @Prop() color: string;
+
+ @Listen('ionStyle')
+ itemStyle(ev: UIEvent) {
+ ev.stopPropagation();
+
+ let hasChildStyleChange = false;
+ let updatedStyles: any = ev.detail;
+
+ for (var key in updatedStyles) {
+ if (updatedStyles[key] !== this.childStyles['item-' + key]) {
+ this.childStyles['item-' + key] = updatedStyles[key];
+ hasChildStyleChange = true;
+ }
+ }
+
+ // returning true tells the renderer to queue an update
+ return hasChildStyleChange;
+ }
+
+ ionViewDidLoad() {
+ // Add item-button classes to each ion-button in the item
+ const buttons = this.$el.querySelectorAll('ion-button') as any;
+ for (var i = 0; i < buttons.length; i++) {
+ buttons[i].itemButton = true;
+ }
+ }
+
+ render() {
+ let themedClasses = {
+ ...this.childStyles,
+ ...createThemedClasses(this.mode, this.color, 'item'),
+ 'item-block': true
+ };
+
+ return (
+
+
+
+
+ );
+
+ // template:
+ // '
+
+
+
+ ' +
+ // '
' +
+ // '',
+ }
+
+
+ // _ids: number = -1;
+ // _inputs: Array' +
+ // '' +
+ // ' ' +
+ // '
' +
+ // '