1 | import { r as registerInstance, h } from './core-bb3ac537.js';
|
2 |
|
3 | const keys = ['inputs', 'outputs', 'props', 'events', 'methods'];
|
4 | const 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 |
|
41 | const 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 |
|
48 | const 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 |
|
61 | const 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 |
|
68 | const 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 |
|
81 | const 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 |
|
94 | const 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 |
|
110 | const 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 |
|
123 | const 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 |
|
136 | const 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 |
|
143 | const Toc = class {
|
144 | constructor(hostRef) {
|
145 | registerInstance(this, hostRef);
|
146 | this.activeId = '#overview';
|
147 | |
148 |
|
149 |
|
150 | this.docs = {};
|
151 | |
152 |
|
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 | };
|
209 | const debounce = (func, wait = 0) => {
|
210 | let timer;
|
211 | return (...args) => {
|
212 | clearTimeout(timer);
|
213 | timer = setTimeout(func, wait, ...args);
|
214 | };
|
215 | };
|
216 |
|
217 | const 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 |
|
224 | export { 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 };
|