@triniwiz/nativescript-masonkit 1.0.0-beta.89 → 1.0.0-beta.90

package/web.d.ts

@@ -1,19 +1,30 @@
-import { View, Text } from '.';
-export declare class Div extends View {
+import { Scroll, Text } from '.';
+/**
+ * Block containers extend `Scroll`, not `View`, so any of them can scroll when
+ * `overflow` says so — as in a browser, where every block box is scrollable.
+ *
+ * This is affordable because neither platform uses the system scroll view:
+ * Android's `Scroll` is a custom `TwoDScrollView` (a FrameLayout with
+ * two-dimensional and nested-scroll support), and on iOS the scroll component
+ * hosts a `MasonUIView` with its own scroll handling, precisely because UIKit's
+ * `UIScrollView` breaks with nested scroll views. So nesting these behaves the
+ * way nested scrollable boxes do on the web.
+ */
+export declare class Div extends Scroll {
 }
-export declare class Section extends View {
+export declare class Section extends Scroll {
 }
-export declare class Header extends View {
+export declare class Header extends Scroll {
 }
-export declare class Footer extends View {
+export declare class Footer extends Scroll {
 }
-export declare class Article extends View {
+export declare class Article extends Scroll {
 }
-export declare class Main extends View {
+export declare class Main extends Scroll {
 }
-export declare class Nav extends View {
+export declare class Nav extends Scroll {
 }
-export declare class Aside extends View {
+export declare class Aside extends Scroll {
 }
 export declare class Span extends Text {
     constructor();
@@ -42,7 +53,11 @@ export declare class H6 extends Text {
 export declare class P extends Text {
     constructor();
 }
-export declare class Ul extends View {
+export declare class Ul extends Scroll {
+    constructor();
+}
+export declare class Ol extends Scroll {
+    constructor();
 }
 export declare class Li extends Text {
     constructor();
@@ -56,6 +71,123 @@ export declare class B extends Text {
 export declare class Strong extends Text {
     constructor();
 }
+export declare class Pre extends Text {
+    constructor();
+}
+export declare class Em extends Text {
+    constructor();
+}
+export declare class I extends Text {
+    constructor();
+}
 export declare class A extends Text {
+    private _href;
+    private _listening;
+    constructor();
+    /**
+     * `href` did not exist anywhere in this package or the natives — an `<a>` was a
+     * styled span that fired a `click` event and nothing more, so links in pasted
+     * markup went nowhere. The native side already makes the element clickable and
+     * focusable (TextView.kt's `TextType.A` case); this gives that click a
+     * destination.
+     */
+    get href(): string;
+    set href(value: string);
+    private followHref;
+}
+/** A generic block container, same box as `<div>`. */
+declare class BlockElement extends Scroll {
+}
+export declare class Figure extends BlockElement {
     constructor();
 }
+export declare class Figcaption extends BlockElement {
+}
+export declare class Address extends BlockElement {
+}
+export declare class Details extends BlockElement {
+}
+export declare class Summary extends BlockElement {
+}
+export declare class Hgroup extends BlockElement {
+}
+export declare class Dl extends BlockElement {
+    constructor();
+}
+export declare class Dt extends BlockElement {
+}
+export declare class Dd extends BlockElement {
+    constructor();
+}
+export declare class Form extends BlockElement {
+}
+export declare class Fieldset extends BlockElement {
+}
+export declare class Legend extends BlockElement {
+}
+export declare class Picture extends BlockElement {
+}
+export declare class Hr extends BlockElement {
+    constructor();
+}
+/**
+ * Phrasing elements. All of these previously resolved to a bare `Span` with no
+ * visual difference at all — `<del>` looked identical to its surrounding text.
+ */
+declare class PhrasingElement extends Text {
+    constructor();
+}
+export declare class Small extends PhrasingElement {
+    constructor();
+}
+export declare class Mark extends PhrasingElement {
+    constructor();
+}
+export declare class Sub extends PhrasingElement {
+    constructor();
+}
+export declare class Sup extends PhrasingElement {
+    constructor();
+}
+export declare class U extends PhrasingElement {
+    constructor();
+}
+export declare class Ins extends PhrasingElement {
+    constructor();
+}
+export declare class S extends PhrasingElement {
+    constructor();
+}
+export declare class Del extends PhrasingElement {
+    constructor();
+}
+export declare class Abbr extends PhrasingElement {
+}
+export declare class Cite extends PhrasingElement {
+    constructor();
+}
+export declare class Dfn extends PhrasingElement {
+    constructor();
+}
+export declare class Q extends PhrasingElement {
+}
+export declare class Kbd extends PhrasingElement {
+    constructor();
+}
+export declare class Samp extends PhrasingElement {
+    constructor();
+}
+export declare class Var extends PhrasingElement {
+    constructor();
+}
+export declare class Time extends PhrasingElement {
+}
+export declare class Label extends PhrasingElement {
+}
+export declare class Output extends PhrasingElement {
+}
+export declare class Bdi extends PhrasingElement {
+}
+export declare class Bdo extends PhrasingElement {
+}
+export {};

package/web.js

@@ -1,48 +1,74 @@
-import { CSSType } from '@nativescript/core';
-import { View, Text } from '.';
-let Div = class Div extends View {
+import { CSSType, Utils } from '@nativescript/core';
+import { Scroll, Text } from '.';
+/**
+ * Apply user-agent default styles.
+ *
+ * Written to the `css:` tier rather than as local style values: a local value
+ * outranks every stylesheet rule in NativeScript's cascade, so a UA default set
+ * as `view.style.x` is impossible for an app to override — `ul { margin: 0 }`
+ * and Tailwind's `list-none` both silently lost. On the `css:` tier an app rule
+ * for the same property replaces it, which is what a UA default should do.
+ */
+function applyUaCss(view, declarations) {
+    const style = view.style;
+    for (const property in declarations) {
+        style[`css:${property}`] = declarations[property];
+    }
+}
+/**
+ * Block containers extend `Scroll`, not `View`, so any of them can scroll when
+ * `overflow` says so — as in a browser, where every block box is scrollable.
+ *
+ * This is affordable because neither platform uses the system scroll view:
+ * Android's `Scroll` is a custom `TwoDScrollView` (a FrameLayout with
+ * two-dimensional and nested-scroll support), and on iOS the scroll component
+ * hosts a `MasonUIView` with its own scroll handling, precisely because UIKit's
+ * `UIScrollView` breaks with nested scroll views. So nesting these behaves the
+ * way nested scrollable boxes do on the web.
+ */
+let Div = class Div extends Scroll {
 };
 Div = __decorate([
     CSSType('div')
 ], Div);
 export { Div };
-let Section = class Section extends View {
+let Section = class Section extends Scroll {
 };
 Section = __decorate([
     CSSType('section')
 ], Section);
 export { Section };
-let Header = class Header extends View {
+let Header = class Header extends Scroll {
 };
 Header = __decorate([
     CSSType('header')
 ], Header);
 export { Header };
-let Footer = class Footer extends View {
+let Footer = class Footer extends Scroll {
 };
 Footer = __decorate([
     CSSType('footer')
 ], Footer);
 export { Footer };
-let Article = class Article extends View {
+let Article = class Article extends Scroll {
 };
 Article = __decorate([
     CSSType('article')
 ], Article);
 export { Article };
-let Main = class Main extends View {
+let Main = class Main extends Scroll {
 };
 Main = __decorate([
     CSSType('main')
 ], Main);
 export { Main };
-let Nav = class Nav extends View {
+let Nav = class Nav extends Scroll {
 };
 Nav = __decorate([
     CSSType('nav')
 ], Nav);
 export { Nav };
-let Aside = class Aside extends View {
+let Aside = class Aside extends Scroll {
 };
 Aside = __decorate([
     CSSType('aside')
@@ -147,12 +173,39 @@ P = __decorate([
     __metadata("design:paramtypes", [])
 ], P);
 export { P };
-let Ul = class Ul extends View {
+// Browser UA default for <ul>/<ol>: `margin: 1em 0; padding-inline-start: 40px`
+// (16px assumes the standard 16px root font-size, matching ua_defaults.rs's
+// convention for the other block tags below). The padding is what reserves
+// the marker gutter — `View.kt`'s/`MasonUIView.swift`'s `drawListItemMarkers`
+// (see below) draws each marker relative to its `<li>` child's own resolved
+// position, so it lands inside whatever space the container's own padding
+// already pushed that child into; no separate per-item bookkeeping needed.
+function applyListUaDefaults(view) {
+    applyUaCss(view, { 'margin-top': 16, 'margin-bottom': 16, 'padding-left': 40 });
+}
+let Ul = class Ul extends Scroll {
+    constructor() {
+        super();
+        applyListUaDefaults(this);
+    }
 };
 Ul = __decorate([
-    CSSType('ul')
+    CSSType('ul'),
+    __metadata("design:paramtypes", [])
 ], Ul);
 export { Ul };
+let Ol = class Ol extends Scroll {
+    constructor() {
+        super();
+        applyListUaDefaults(this);
+        applyUaCss(this, { 'list-style-type': 'decimal' });
+    }
+};
+Ol = __decorate([
+    CSSType('ol'),
+    __metadata("design:paramtypes", [])
+], Ol);
+export { Ol };
 let Li = class Li extends Text {
     constructor() {
         // @ts-ignore
@@ -197,10 +250,81 @@ Strong = __decorate([
     __metadata("design:paramtypes", [])
 ], Strong);
 export { Strong };
+let Pre = class Pre extends Text {
+    constructor() {
+        // @ts-ignore
+        super(13 /* TextType.Pre */);
+    }
+};
+Pre = __decorate([
+    CSSType('pre'),
+    __metadata("design:paramtypes", [])
+], Pre);
+export { Pre };
+let Em = class Em extends Text {
+    constructor() {
+        // @ts-ignore
+        super(15 /* TextType.Em */);
+    }
+};
+Em = __decorate([
+    CSSType('em'),
+    __metadata("design:paramtypes", [])
+], Em);
+export { Em };
+let I = class I extends Text {
+    constructor() {
+        // @ts-ignore
+        super(16 /* TextType.I */);
+    }
+};
+I = __decorate([
+    CSSType('i'),
+    __metadata("design:paramtypes", [])
+], I);
+export { I };
 let A = class A extends Text {
     constructor() {
         // @ts-ignore
         super(17 /* TextType.A */);
+        this._href = '';
+        this._listening = false;
+        this.followHref = () => {
+            const href = this._href;
+            // An in-page fragment has nothing to open; leave it to the app, which is the
+            // only thing that knows what its own anchors mean.
+            if (!href || href.startsWith('#')) {
+                return;
+            }
+            try {
+                Utils.openUrl(href);
+            }
+            catch (error) {
+                // openUrl throws on a scheme the platform cannot handle; a dead link
+                // should not take the app down.
+            }
+        };
+    }
+    /**
+     * `href` did not exist anywhere in this package or the natives — an `<a>` was a
+     * styled span that fired a `click` event and nothing more, so links in pasted
+     * markup went nowhere. The native side already makes the element clickable and
+     * focusable (TextView.kt's `TextType.A` case); this gives that click a
+     * destination.
+     */
+    get href() {
+        return this._href;
+    }
+    set href(value) {
+        this._href = value == null ? '' : String(value);
+        // The native side delivers a click only to registered listeners, so this has
+        // to hold one of its own. Registering before the native view exists is fine:
+        // ViewBase queues it and replays the queue on initNativeView.
+        if (this._href && !this._listening) {
+            this._listening = true;
+            // @ts-ignore — the renderers' event typing does not cover this.
+            this.addEventListener('click', this.followHref);
+        }
     }
 };
 A = __decorate([
@@ -208,4 +332,327 @@ A = __decorate([
     __metadata("design:paramtypes", [])
 ], A);
 export { A };
+// ---------------------------------------------------------------------------
+// Remaining HTML elements
+// ---------------------------------------------------------------------------
+//
+// The native HTML parser has always mapped roughly 60 tags, but `web.ts` only
+// exported 26 classes — so `<hr>`, `<small>`, `<label>`, `<figure>` and the rest
+// failed at element resolution in every framework, even though the native side
+// knew what to do with them. These are TS-only additions: `TextType` is closed
+// at 18 members, so each phrasing element reuses `Span` and gets its
+// distinguishing style from properties that already work.
+/** A generic block container, same box as `<div>`. */
+class BlockElement extends Scroll {
+}
+let Figure = class Figure extends BlockElement {
+    constructor() {
+        super();
+        // Browser UA default: `margin: 1em 40px`.
+        applyUaCss(this, { 'margin-top': 16, 'margin-bottom': 16, 'margin-left': 40, 'margin-right': 40 });
+    }
+};
+Figure = __decorate([
+    CSSType('figure'),
+    __metadata("design:paramtypes", [])
+], Figure);
+export { Figure };
+let Figcaption = class Figcaption extends BlockElement {
+};
+Figcaption = __decorate([
+    CSSType('figcaption')
+], Figcaption);
+export { Figcaption };
+let Address = class Address extends BlockElement {
+};
+Address = __decorate([
+    CSSType('address')
+], Address);
+export { Address };
+let Details = class Details extends BlockElement {
+};
+Details = __decorate([
+    CSSType('details')
+], Details);
+export { Details };
+let Summary = class Summary extends BlockElement {
+};
+Summary = __decorate([
+    CSSType('summary')
+], Summary);
+export { Summary };
+let Hgroup = class Hgroup extends BlockElement {
+};
+Hgroup = __decorate([
+    CSSType('hgroup')
+], Hgroup);
+export { Hgroup };
+let Dl = class Dl extends BlockElement {
+    constructor() {
+        super();
+        applyUaCss(this, { 'margin-top': 16, 'margin-bottom': 16 });
+    }
+};
+Dl = __decorate([
+    CSSType('dl'),
+    __metadata("design:paramtypes", [])
+], Dl);
+export { Dl };
+let Dt = class Dt extends BlockElement {
+};
+Dt = __decorate([
+    CSSType('dt')
+], Dt);
+export { Dt };
+let Dd = class Dd extends BlockElement {
+    constructor() {
+        super();
+        // Browser UA default: `margin-inline-start: 40px`.
+        applyUaCss(this, { 'margin-left': 40 });
+    }
+};
+Dd = __decorate([
+    CSSType('dd'),
+    __metadata("design:paramtypes", [])
+], Dd);
+export { Dd };
+let Form = class Form extends BlockElement {
+};
+Form = __decorate([
+    CSSType('form')
+], Form);
+export { Form };
+let Fieldset = class Fieldset extends BlockElement {
+};
+Fieldset = __decorate([
+    CSSType('fieldset')
+], Fieldset);
+export { Fieldset };
+let Legend = class Legend extends BlockElement {
+};
+Legend = __decorate([
+    CSSType('legend')
+], Legend);
+export { Legend };
+let Picture = class Picture extends BlockElement {
+};
+Picture = __decorate([
+    CSSType('picture')
+], Picture);
+export { Picture };
+let Hr = class Hr extends BlockElement {
+    constructor() {
+        super();
+        // A browser draws `<hr>` as an inset-bordered box: `margin: 0.5em auto`,
+        // 1px border. Mason has no `border-style: inset`, so a plain 1px top border
+        // is the closest honest approximation.
+        applyUaCss(this, {
+            'margin-top': 8,
+            'margin-bottom': 8,
+            'border-top-width': 1,
+            'border-top-style': 'solid',
+            height: 0,
+        });
+    }
+};
+Hr = __decorate([
+    CSSType('hr'),
+    __metadata("design:paramtypes", [])
+], Hr);
+export { Hr };
+/**
+ * Phrasing elements. All of these previously resolved to a bare `Span` with no
+ * visual difference at all — `<del>` looked identical to its surrounding text.
+ */
+class PhrasingElement extends Text {
+    constructor() {
+        // @ts-ignore
+        super(2 /* TextType.Span */);
+    }
+}
+let Small = class Small extends PhrasingElement {
+    constructor() {
+        super();
+        applyUaCss(this, { 'font-size': '0.8em' });
+    }
+};
+Small = __decorate([
+    CSSType('small'),
+    __metadata("design:paramtypes", [])
+], Small);
+export { Small };
+let Mark = class Mark extends PhrasingElement {
+    constructor() {
+        super();
+        applyUaCss(this, { 'background-color': 'Mark', color: 'MarkText' });
+    }
+};
+Mark = __decorate([
+    CSSType('mark'),
+    __metadata("design:paramtypes", [])
+], Mark);
+export { Mark };
+let Sub = class Sub extends PhrasingElement {
+    constructor() {
+        super();
+        applyUaCss(this, { 'font-size': '0.75em', 'vertical-align': 'sub' });
+    }
+};
+Sub = __decorate([
+    CSSType('sub'),
+    __metadata("design:paramtypes", [])
+], Sub);
+export { Sub };
+let Sup = class Sup extends PhrasingElement {
+    constructor() {
+        super();
+        applyUaCss(this, { 'font-size': '0.75em', 'vertical-align': 'super' });
+    }
+};
+Sup = __decorate([
+    CSSType('sup'),
+    __metadata("design:paramtypes", [])
+], Sup);
+export { Sup };
+let U = class U extends PhrasingElement {
+    constructor() {
+        super();
+        applyUaCss(this, { 'text-decoration': 'underline' });
+    }
+};
+U = __decorate([
+    CSSType('u'),
+    __metadata("design:paramtypes", [])
+], U);
+export { U };
+let Ins = class Ins extends PhrasingElement {
+    constructor() {
+        super();
+        applyUaCss(this, { 'text-decoration': 'underline' });
+    }
+};
+Ins = __decorate([
+    CSSType('ins'),
+    __metadata("design:paramtypes", [])
+], Ins);
+export { Ins };
+let S = class S extends PhrasingElement {
+    constructor() {
+        super();
+        applyUaCss(this, { 'text-decoration': 'line-through' });
+    }
+};
+S = __decorate([
+    CSSType('s'),
+    __metadata("design:paramtypes", [])
+], S);
+export { S };
+let Del = class Del extends PhrasingElement {
+    constructor() {
+        super();
+        applyUaCss(this, { 'text-decoration': 'line-through' });
+    }
+};
+Del = __decorate([
+    CSSType('del'),
+    __metadata("design:paramtypes", [])
+], Del);
+export { Del };
+let Abbr = class Abbr extends PhrasingElement {
+};
+Abbr = __decorate([
+    CSSType('abbr')
+], Abbr);
+export { Abbr };
+let Cite = class Cite extends PhrasingElement {
+    constructor() {
+        super();
+        applyUaCss(this, { 'font-style': 'italic' });
+    }
+};
+Cite = __decorate([
+    CSSType('cite'),
+    __metadata("design:paramtypes", [])
+], Cite);
+export { Cite };
+let Dfn = class Dfn extends PhrasingElement {
+    constructor() {
+        super();
+        applyUaCss(this, { 'font-style': 'italic' });
+    }
+};
+Dfn = __decorate([
+    CSSType('dfn'),
+    __metadata("design:paramtypes", [])
+], Dfn);
+export { Dfn };
+let Q = class Q extends PhrasingElement {
+};
+Q = __decorate([
+    CSSType('q')
+], Q);
+export { Q };
+let Kbd = class Kbd extends PhrasingElement {
+    constructor() {
+        super();
+        applyUaCss(this, { 'font-family': 'monospace', 'font-size': '0.9em' });
+    }
+};
+Kbd = __decorate([
+    CSSType('kbd'),
+    __metadata("design:paramtypes", [])
+], Kbd);
+export { Kbd };
+let Samp = class Samp extends PhrasingElement {
+    constructor() {
+        super();
+        applyUaCss(this, { 'font-family': 'monospace' });
+    }
+};
+Samp = __decorate([
+    CSSType('samp'),
+    __metadata("design:paramtypes", [])
+], Samp);
+export { Samp };
+let Var = class Var extends PhrasingElement {
+    constructor() {
+        super();
+        applyUaCss(this, { 'font-style': 'italic' });
+    }
+};
+Var = __decorate([
+    CSSType('var'),
+    __metadata("design:paramtypes", [])
+], Var);
+export { Var };
+let Time = class Time extends PhrasingElement {
+};
+Time = __decorate([
+    CSSType('time')
+], Time);
+export { Time };
+let Label = class Label extends PhrasingElement {
+};
+Label = __decorate([
+    CSSType('label')
+], Label);
+export { Label };
+let Output = class Output extends PhrasingElement {
+};
+Output = __decorate([
+    CSSType('output')
+], Output);
+export { Output };
+let Bdi = class Bdi extends PhrasingElement {
+};
+Bdi = __decorate([
+    CSSType('bdi')
+], Bdi);
+export { Bdi };
+let Bdo = class Bdo extends PhrasingElement {
+};
+Bdo = __decorate([
+    CSSType('bdo')
+], Bdo);
+export { Bdo };
 //# sourceMappingURL=web.js.map