UNPKG

10.5 kBJavaScriptView Raw
1import { r as registerInstance, h } from './core-bb3ac537.js';
2
3const keys = ['inputs', 'outputs', 'props', 'events', 'methods'];
4const Api = class {
5 constructor(hostRef) {
6 registerInstance(this, hostRef);
7 }
8 hasApi() {
9 if (!this.doc) {
10 return false;
11 }
12 for (const k of keys) {
13 if (this.doc[k] && this.doc[k].length > 0) {
14 return true;
15 }
16 }
17 }
18 angular() {
19 return [
20 this.doc.inputs ? this.doc.inputs.map(i => h("ad-input-def", { input: i })) : undefined,
21 this.doc.outputs ? this.doc.outputs.map(i => h("ad-output-def", { output: i })) : undefined,
22 this.doc.props ? this.doc.props.map(i => h("ad-prop-def", { prop: i })) : undefined
23 ];
24 }
25 stencil() {
26 return [
27 this.doc.props ? this.doc.props.map(i => h("ad-prop-def", { prop: i })) : undefined,
28 this.doc.events ? this.doc.events.map(i => h("ad-event-def", { event: i })) : undefined,
29 ];
30 }
31 render() {
32 if (!this.hasApi()) {
33 return undefined;
34 }
35 const isAngular = !this.doc.tag;
36 return (h("article", { id: "api", class: "api" }, h("h2", null, "API"), isAngular ? this.angular() : this.stencil(), this.doc.methods ? this.doc.methods.map(i => h("ad-method-def", { method: i })) : undefined));
37 }
38 static get style() { return ".sc-ad-api-h{display:block;font-size:.875rem;font-family:var(--anj-font-family);font-weight:400;line-height:1.5;outline:none}.sc-ad-api-h, .sc-ad-api-h:after, .sc-ad-api-h:before{-webkit-box-sizing:border-box;box-sizing:border-box;outline:none}.sc-ad-api-h:active, .sc-ad-api-h .sc-ad-api:active, .sc-ad-api-h:focus, .sc-ad-api-h .sc-ad-api:focus{outline:none}.sc-ad-api-h .api.sc-ad-api{border-bottom:1px solid var(--anj-border);margin-bottom:3rem;padding-bottom:3rem}.sc-ad-api-h .api.sc-ad-api h2.sc-ad-api{margin-bottom:1.5rem}"; }
39};
40
41const ApiName = class {
42 constructor(hostRef) {
43 registerInstance(this, hostRef);
44 }
45 static get style() { return "ad-api-name{display:inline;font-size:.875rem;font-family:var(--anj-font-family);font-weight:400;line-height:1.5;outline:none}ad-api-name,ad-api-name:after,ad-api-name:before{-webkit-box-sizing:border-box;box-sizing:border-box;outline:none}ad-api-name:active,ad-api-name :active,ad-api-name:focus,ad-api-name :focus{outline:none}ad-api-name:after{color:var(--anj-secondary-dark);content:\":\";margin-right:.5rem}"; }
46};
47
48const ArgDef = class {
49 constructor(hostRef) {
50 registerInstance(this, hostRef);
51 }
52 render() {
53 return [
54 h("ad-api-name", null, this.arg.name),
55 h("ad-type-def", null, this.arg.type)
56 ];
57 }
58 static get style() { return "ad-arg-def{display:inline;font-size:.875rem;font-family:var(--anj-font-family);font-weight:400;line-height:1.5;outline:none}ad-arg-def,ad-arg-def:after,ad-arg-def:before{-webkit-box-sizing:border-box;box-sizing:border-box;outline:none}ad-arg-def:active,ad-arg-def :active,ad-arg-def:focus,ad-arg-def :focus{outline:none}ad-arg-def:after{color:var(--anj-secondary-dark);content:\",\";margin-right:.5rem}ad-arg-def:last-child:after{content:none;margin-right:0}"; }
59};
60
61const Decorator = class {
62 constructor(hostRef) {
63 registerInstance(this, hostRef);
64 }
65 static get style() { return "ad-decorator{color:var(--anj-secondary-dark)}.api.ng ad-method-def ad-decorator,.api.ng ad-prop-def ad-decorator{display:none}"; }
66};
67
68const EventDef = class {
69 constructor(hostRef) {
70 registerInstance(this, hostRef);
71 }
72 render() {
73 return [
74 h("h4", null, h("ad-decorator", null, "@Event"), "\u00A0", h("ad-api-name", null, this.event.event), h("ad-type-def", null, "<", this.event.detail, ">")),
75 h("p", null, this.event.docs)
76 ];
77 }
78 static get style() { return "ad-event-def,ad-input-def,ad-method-def,ad-output-def,ad-prop-def{display:block;margin-bottom:1.5rem}ad-event-def h4,ad-input-def h4,ad-method-def h4,ad-output-def h4,ad-prop-def h4{color:var(--anj-dark);font-size:1rem;font-weight:400;margin:0 0 .5rem;padding:0}"; }
79};
80
81const InputDef = class {
82 constructor(hostRef) {
83 registerInstance(this, hostRef);
84 }
85 render() {
86 return [
87 h("h4", null, h("ad-decorator", null, "@Input\u00A0"), h("ad-api-name", null, this.input.name), h("ad-type-def", null, this.input.type)),
88 h("p", null, this.input.docs)
89 ];
90 }
91 static get style() { return "ad-event-def,ad-input-def,ad-method-def,ad-output-def,ad-prop-def{display:block;margin-bottom:1.5rem}ad-event-def h4,ad-input-def h4,ad-method-def h4,ad-output-def h4,ad-prop-def h4{color:var(--anj-dark);font-size:1rem;font-weight:400;margin:0 0 .5rem;padding:0}"; }
92};
93
94const MethodDef = class {
95 constructor(hostRef) {
96 registerInstance(this, hostRef);
97 }
98 nameless(name) {
99 return `(${name.split('(')[1]}`;
100 }
101 render() {
102 return [
103 h("h4", null, h("ad-decorator", null, "@Method\u00A0"), h("ad-api-name", null, this.method.name), h("ad-type-def", null, this.nameless(this.method.signature))),
104 h("p", null, this.method.docs)
105 ];
106 }
107 static get style() { return "ad-event-def,ad-input-def,ad-method-def,ad-output-def,ad-prop-def{display:block;margin-bottom:1.5rem}ad-event-def h4,ad-input-def h4,ad-method-def h4,ad-output-def h4,ad-prop-def h4{color:var(--anj-dark);font-size:1rem;font-weight:400;margin:0 0 .5rem;padding:0}"; }
108};
109
110const OutputDef = class {
111 constructor(hostRef) {
112 registerInstance(this, hostRef);
113 }
114 render() {
115 return [
116 h("h4", null, h("ad-decorator", null, "@Output\u00A0"), h("ad-api-name", null, this.output.name), h("ad-type-def", null, this.output.type)),
117 h("p", null, this.output.docs)
118 ];
119 }
120 static get style() { return "ad-event-def,ad-input-def,ad-method-def,ad-output-def,ad-prop-def{display:block;margin-bottom:1.5rem}ad-event-def h4,ad-input-def h4,ad-method-def h4,ad-output-def h4,ad-prop-def h4{color:var(--anj-dark);font-size:1rem;font-weight:400;margin:0 0 .5rem;padding:0}"; }
121};
122
123const PropDef = class {
124 constructor(hostRef) {
125 registerInstance(this, hostRef);
126 }
127 render() {
128 return [
129 h("h4", null, h("ad-decorator", null, "@Prop\u00A0"), h("ad-api-name", null, this.prop.name), h("ad-type-def", null, this.prop.type)),
130 h("p", null, this.prop.docs)
131 ];
132 }
133 static get style() { return "ad-event-def,ad-input-def,ad-method-def,ad-output-def,ad-prop-def{display:block;margin-bottom:1.5rem}ad-event-def h4,ad-input-def h4,ad-method-def h4,ad-output-def h4,ad-prop-def h4{color:var(--anj-dark);font-size:1rem;font-weight:400;margin:0 0 .5rem;padding:0}"; }
134};
135
136const RealTime = class {
137 constructor(hostRef) {
138 registerInstance(this, hostRef);
139 }
140 static get style() { return "ad-real-time{border:1px dashed var(--anj-border);border-radius:.25rem;display:block;margin-top:1.5rem;overflow-x:auto;padding:1rem;width:100%}"; }
141};
142
143const Toc = class {
144 constructor(hostRef) {
145 registerInstance(this, hostRef);
146 this.activeId = '#overview';
147 /**
148 * The object map of usa cases to their markdown
149 */
150 this.docs = {};
151 /**
152 * The object map of usa cases to their markdown
153 */
154 this.keys = [];
155 }
156 onDemosChange() {
157 this.sectionIds = ['#overview'].concat(this.keys.map(d => `#${d}`)).concat('#api');
158 }
159 connectedCallback() {
160 this.navigate = debounce(this.navigate.bind(this), 100);
161 this.onScroll = debounce(this.onScroll.bind(this), 25);
162 this.onDemosChange();
163 if (window.location.hash) {
164 this.navigate();
165 }
166 }
167 onScroll() {
168 const els = this.sectionIds.map(id => document.querySelector(id));
169 let closest = els[0];
170 els.slice(1).forEach(el => {
171 if (el && Math.abs(window.scrollY - el.offsetTop) < Math.abs(window.scrollY - closest.offsetTop)) {
172 closest = el;
173 }
174 });
175 this.activeId = `#${closest.getAttribute('id')}`;
176 }
177 parseTitle(id) {
178 const usage = id.replace('#', '');
179 const doc = this.docs[usage];
180 return doc ? doc.split(/##(.*?)\n/).find(p => p !== '').trim() : usage;
181 }
182 anchorClass(usage) {
183 return usage === this.activeId ? 'anj-active' : '';
184 }
185 navigate() {
186 return new Promise(resolve => {
187 window.setTimeout(() => {
188 this.activeId = window.location.hash;
189 const el = document.querySelector(this.activeId);
190 if (el) {
191 window.scrollTo(0, el.offsetTop);
192 }
193 resolve();
194 }, 500);
195 });
196 }
197 render() {
198 if (!this.sectionIds) {
199 return;
200 }
201 const path = window.location.pathname;
202 return (h("div", { class: "anj-toc" }, this.sectionIds.map(id => h("a", { href: `${path}${id}`, onClick: () => this.activeId = id, class: this.anchorClass(id) }, this.parseTitle(id)))));
203 }
204 static get watchers() { return {
205 "keys": ["onDemosChange"]
206 }; }
207 static get style() { return "ad-toc{display:block;position:relative}ad-toc .anj-toc{padding:1rem 0;position:fixed;top:3rem}ad-toc a{display:block;font-size:.75rem;margin-bottom:.5rem;text-transform:capitalize;-webkit-transition:color .2s ease;transition:color .2s ease}ad-toc a:focus{text-decoration:underline}ad-toc a:active{text-decoration:none}ad-toc a.anj-active,ad-toc a.anj-active:focus,ad-toc a.anj-active:hover{color:var(--anj-primary);text-decoration:none}"; }
208};
209const debounce = (func, wait = 0) => {
210 let timer;
211 return (...args) => {
212 clearTimeout(timer);
213 timer = setTimeout(func, wait, ...args);
214 };
215};
216
217const TypeDef = class {
218 constructor(hostRef) {
219 registerInstance(this, hostRef);
220 }
221 static get style() { return "ad-type-def{color:var(--anj-neutral-dark);font-size:.75rem}"; }
222};
223
224export { Api as ad_api, ApiName as ad_api_name, ArgDef as ad_arg_def, Decorator as ad_decorator, EventDef as ad_event_def, InputDef as ad_input_def, MethodDef as ad_method_def, OutputDef as ad_output_def, PropDef as ad_prop_def, RealTime as ad_real_time, Toc as ad_toc, TypeDef as ad_type_def };