inugami-ng 0.0.29 → 0.0.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -26,7 +26,7 @@ class InuCheckboxGroup {
26
26
  this.initStyleClass();
27
27
  });
28
28
  }
29
- ngOnInit() {
29
+ ngAfterViewInit() {
30
30
  this.initSelectItems();
31
31
  }
32
32
  initSelectItems() {
@@ -51,6 +51,7 @@ class InuCheckboxGroup {
51
51
  }
52
52
  }
53
53
  this._values.set(result);
54
+ this.sendChanged();
54
55
  }
55
56
  initStyleClass() {
56
57
  const result = ['inu-checkbox-group'];
@@ -93,6 +94,9 @@ class InuCheckboxGroup {
93
94
  else {
94
95
  value.selected = !value.selected;
95
96
  }
97
+ this.sendChanged();
98
+ }
99
+ sendChanged() {
96
100
  const newSelectedValues = [];
97
101
  const currentValues = this._values();
98
102
  if (currentValues) {
@@ -1 +1 @@
1
- {"version":3,"file":"inugami-ng-components-inu-checkbox-group.mjs","sources":["../../../projects/inugami-ng/components/inu-checkbox-group/inu-checkbox-group.component.ts","../../../projects/inugami-ng/components/inu-checkbox-group/inu-checkbox-group.component.html","../../../projects/inugami-ng/components/inu-checkbox-group/inugami-ng-components-inu-checkbox-group.ts"],"sourcesContent":["import {Component, effect, input, model, ModelSignal, OnInit, output, signal} from '@angular/core';\nimport {InuSelectItem} from 'inugami-ng/models';\nimport {FormValueControl} from '@angular/forms/signals';\nimport {InuIcon} from 'inugami-icons';\n\n@Component({\n selector: 'inu-checkbox-group',\n standalone: true,\n providers: [],\n imports: [InuIcon],\n templateUrl: './inu-checkbox-group.component.html',\n styleUrl: './inu-checkbox-group.component.scss',\n})\nexport class InuCheckboxGroup<T> implements FormValueControl<T[]>, OnInit {\n\n\n //==================================================================================================================\n // ATTRIBUTES\n //==================================================================================================================\n // input\n readonly disabled = input(false);\n readonly label = input('');\n readonly _required = input(false, {alias: 'required'});\n readonly values = input<InuSelectItem<T>[]>([]);\n readonly vertical = input(false);\n changed = output<T[]>();\n\n // FormValueControl\n value: ModelSignal<T[]> = model(<T[]>[]);\n _values = signal<InuSelectItem<T>[]>([]);\n // internal\n\n styleClass = signal<string>('');\n\n\n //==================================================================================================================\n // INIT\n //==================================================================================================================\n\n constructor() {\n effect(() => {\n this.initStyleClass();\n });\n }\n\n ngOnInit(): void {\n this.initSelectItems();\n }\n\n private initSelectItems() {\n\n const values = this.values();\n if (!values) {\n return;\n }\n\n const result: InuSelectItem<T>[] = [];\n for (let item of values) {\n result.push(Object.assign({}, item));\n }\n const currentValue = this.value();\n if (!currentValue) {\n return;\n }\n\n for (let valueItem of currentValue) {\n for (let resultItem of result) {\n if (this.match(valueItem, resultItem)) {\n resultItem.selected = true;\n break;\n }\n }\n }\n this._values.set(result);\n }\n\n private initStyleClass() {\n const result: string[] = ['inu-checkbox-group'];\n if (this.vertical()) {\n result.push('vertical');\n }\n if (this._required()) {\n result.push('required');\n }\n if (this.disabled()) {\n result.push('disabled');\n }\n\n if (this._required()) {\n const values = this._values();\n let found = false;\n\n if (values) {\n for (let value of values) {\n found = value.selected != undefined && value.selected;\n if (found) {\n break;\n }\n }\n }\n if(!found){\n result.push('notValid');\n }\n }\n\n this.styleClass.set(result.join(' '));\n }\n\n\n //==================================================================================================================\n // ACTIONS\n //==================================================================================================================\n protected toggle(value: InuSelectItem<T>) {\n if (this.disabled()) {\n return;\n }\n if (value.selected == undefined) {\n value.selected = true\n } else {\n value.selected = !value.selected;\n }\n\n const newSelectedValues: T[] = [];\n const currentValues = this._values();\n if (currentValues) {\n for (let selectItem of currentValues) {\n if (selectItem.selected) {\n newSelectedValues.push(selectItem.value);\n }\n }\n this.value.set(newSelectedValues);\n }\n\n this.initStyleClass();\n\n this.changed.emit(newSelectedValues);\n }\n\n\n protected getItemClass(selectItem: InuSelectItem<T>): string {\n return selectItem.styleClass!;\n }\n\n\n private match(valueItem: T, resultItem: InuSelectItem<T>) {\n return valueItem === resultItem.value;\n }\n}\n","<div [class]=\"styleClass()\">\n\n <div class=\"inu-checkbox-group-label-grp\">\n <div class=\"inu-checkbox-group-label\">\n @if (label()) {\n {{ label() }}\n }\n </div>\n @if (_required()) {\n <div class=\"inu-checkbox-group-required\">\n <inu-icon icon=\"required\" [size]=\"0.5\"></inu-icon>\n </div>\n }\n </div>\n <ul>\n @if (_values()) {\n @for (selectItem of _values(); track selectItem.value; ) {\n <li (click)=\"toggle(selectItem)\" [class]=\"getItemClass(selectItem)\">\n <div class=\"inu-checkbox-group-icon\">\n @if (selectItem.selected) {\n <inu-icon icon=\"check\" [size]=\"0.9\" tabindex=\"0\"></inu-icon>\n }\n </div>\n <div class=\"inu-checkbox-group-label\">\n <span>{{ selectItem.title! }}</span>\n </div>\n\n </li>\n }\n }\n </ul>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"inugami-ng-components-inu-checkbox-group.mjs","sources":["../../../projects/inugami-ng/components/inu-checkbox-group/inu-checkbox-group.component.ts","../../../projects/inugami-ng/components/inu-checkbox-group/inu-checkbox-group.component.html","../../../projects/inugami-ng/components/inu-checkbox-group/inugami-ng-components-inu-checkbox-group.ts"],"sourcesContent":["import {AfterViewInit, Component, effect, input, model, ModelSignal, OnInit, output, signal} from '@angular/core';\nimport {InuSelectItem} from 'inugami-ng/models';\nimport {FormValueControl} from '@angular/forms/signals';\nimport {InuIcon} from 'inugami-icons';\n\n@Component({\n selector : 'inu-checkbox-group',\n standalone : true,\n providers : [],\n imports : [InuIcon],\n templateUrl: './inu-checkbox-group.component.html',\n styleUrl : './inu-checkbox-group.component.scss',\n })\nexport class InuCheckboxGroup<T> implements FormValueControl<T[]>, AfterViewInit {\n\n\n //==================================================================================================================\n // ATTRIBUTES\n //==================================================================================================================\n // input\n readonly disabled = input(false);\n readonly label = input('');\n readonly _required = input(false, {alias: 'required'});\n readonly values = input<InuSelectItem<T>[]>([]);\n readonly vertical = input(false);\n changed = output<T[]>();\n\n // FormValueControl\n value: ModelSignal<T[]> = model(<T[]>[]);\n _values = signal<InuSelectItem<T>[]>([]);\n // internal\n\n styleClass = signal<string>('');\n\n\n //==================================================================================================================\n // INIT\n //==================================================================================================================\n\n constructor() {\n effect(() => {\n this.initStyleClass();\n });\n }\n\n ngAfterViewInit(): void {\n this.initSelectItems();\n }\n\n private initSelectItems() {\n\n const values = this.values();\n if (!values) {\n return;\n }\n\n const result: InuSelectItem<T>[] = [];\n for (let item of values) {\n result.push(Object.assign({}, item));\n }\n const currentValue = this.value();\n if (!currentValue) {\n return;\n }\n\n for (let valueItem of currentValue) {\n for (let resultItem of result) {\n if (this.match(valueItem, resultItem)) {\n resultItem.selected = true;\n break;\n }\n }\n }\n this._values.set(result);\n this.sendChanged();\n }\n\n private initStyleClass() {\n const result: string[] = ['inu-checkbox-group'];\n if (this.vertical()) {\n result.push('vertical');\n }\n if (this._required()) {\n result.push('required');\n }\n if (this.disabled()) {\n result.push('disabled');\n }\n\n if (this._required()) {\n const values = this._values();\n let found = false;\n\n if (values) {\n for (let value of values) {\n found = value.selected != undefined && value.selected;\n if (found) {\n break;\n }\n }\n }\n if (!found) {\n result.push('notValid');\n }\n }\n\n this.styleClass.set(result.join(' '));\n }\n\n\n //==================================================================================================================\n // ACTIONS\n //==================================================================================================================\n protected toggle(value: InuSelectItem<T>) {\n if (this.disabled()) {\n return;\n }\n if (value.selected == undefined) {\n value.selected = true\n } else {\n value.selected = !value.selected;\n }\n\n this.sendChanged();\n }\n\n\n private sendChanged() {\n const newSelectedValues: T[] = [];\n const currentValues = this._values();\n if (currentValues) {\n for (let selectItem of currentValues) {\n if (selectItem.selected) {\n newSelectedValues.push(selectItem.value);\n }\n }\n this.value.set(newSelectedValues);\n }\n\n this.initStyleClass();\n\n this.changed.emit(newSelectedValues);\n }\n\n protected getItemClass(selectItem: InuSelectItem<T>): string {\n return selectItem.styleClass!;\n }\n\n\n private match(valueItem: T, resultItem: InuSelectItem<T>) {\n return valueItem === resultItem.value;\n }\n\n\n}\n","<div [class]=\"styleClass()\">\n\n <div class=\"inu-checkbox-group-label-grp\">\n <div class=\"inu-checkbox-group-label\">\n @if (label()) {\n {{ label() }}\n }\n </div>\n @if (_required()) {\n <div class=\"inu-checkbox-group-required\">\n <inu-icon icon=\"required\" [size]=\"0.5\"></inu-icon>\n </div>\n }\n </div>\n <ul>\n @if (_values()) {\n @for (selectItem of _values(); track selectItem.value; ) {\n <li (click)=\"toggle(selectItem)\" [class]=\"getItemClass(selectItem)\">\n <div class=\"inu-checkbox-group-icon\">\n @if (selectItem.selected) {\n <inu-icon icon=\"check\" [size]=\"0.9\" tabindex=\"0\"></inu-icon>\n }\n </div>\n <div class=\"inu-checkbox-group-label\">\n <span>{{ selectItem.title! }}</span>\n </div>\n\n </li>\n }\n }\n </ul>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
@@ -1,10 +1,15 @@
1
1
  import * as i0 from '@angular/core';
2
- import { Injectable, input, Component, signal, effect, inject } from '@angular/core';
2
+ import { Injectable, input, Component, signal, effect, output, computed, inject } from '@angular/core';
3
3
  import { InuCacheServices } from 'inugami-ng/services';
4
- import { tap, shareReplay } from 'rxjs';
4
+ import { debounceTime, distinctUntilChanged, tap, shareReplay } from 'rxjs';
5
5
  import { HttpClient } from '@angular/common/http';
6
+ import { InuJsonUtils, ObservableSubscriber } from 'inugami-ng/utils';
6
7
  import { InuCode } from 'inugami-ng/components/inu-code';
7
8
  import { InuIcon } from 'inugami-icons';
9
+ import { form, FormField } from '@angular/forms/signals';
10
+ import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
11
+ import { InuCheckboxGroup } from 'inugami-ng/components/inu-checkbox-group';
12
+ import { InuInputText } from 'inugami-ng/components/inu-input-text';
8
13
 
9
14
  const VERBS = ['get', 'put', 'post', 'delete', 'options', 'patch', 'trace'];
10
15
  class InuOpenApiServices {
@@ -314,7 +319,7 @@ class InuOpenApiServices {
314
319
  }
315
320
  }
316
321
  if (examples.length == 0) {
317
- let renderedType = JSON.stringify(schema.array ? [schema.ref] : schema.ref, null, 2);
322
+ let renderedType = InuJsonUtils.convertToJson(schema.array ? [schema.ref] : schema.ref);
318
323
  if ('{}' == renderedType) {
319
324
  if (type == 'string') {
320
325
  renderedType = '""';
@@ -350,7 +355,7 @@ class InuOpenApiServices {
350
355
  valueContent = item.value;
351
356
  }
352
357
  else {
353
- valueContent = JSON.stringify(item.value, null, 2);
358
+ valueContent = InuJsonUtils.convertToJson(item.value);
354
359
  }
355
360
  }
356
361
  result.push({
@@ -439,70 +444,58 @@ class InuOpenApiServices {
439
444
  }
440
445
  return result;
441
446
  }
442
- renderType(schema, schemaTypes, objectTypeCache, level) {
443
- if (!schema || (level > 5)) {
447
+ renderType(schema, schemaTypes, objectTypeCache, level = 0, stack = new Set()) {
448
+ if (!schema || level > 20)
444
449
  return undefined;
445
- }
446
- const array = schema.type == 'array';
447
- let type = '';
450
+ const array = schema.type === 'array';
451
+ let typePath = '';
448
452
  if (array) {
449
- if (schema.items) {
450
- type = schema.items['$ref'];
451
- if (!type && schema.items.type) {
452
- type = schema.items.type;
453
- }
454
- }
453
+ typePath = schema.items?.['$ref'] || schema.items?.type || '';
455
454
  }
456
455
  else {
457
- type = schema.ref;
456
+ typePath = schema.ref || schema.$ref || '';
457
+ }
458
+ const typeName = typePath.includes('/') ? typePath.split('/').pop() : typePath;
459
+ if (typeName && stack.has(typeName)) {
460
+ return { array, name: typeName, value: "[Circular]" };
461
+ }
462
+ if (typeName) {
463
+ const cached = objectTypeCache.find(v => v.name === typeName);
464
+ if (cached) {
465
+ return JSON.parse(JSON.stringify(cached.value));
466
+ }
458
467
  }
459
468
  let currentType = undefined;
469
+ if (typeName && schemaTypes?.schemas) {
470
+ currentType = schemaTypes.schemas.find(item => typeName === item.id || typeName === item.name);
471
+ }
472
+ if (typeName)
473
+ stack.add(typeName);
460
474
  let object = {};
461
- if (type) {
462
- if (schemaTypes?.schemas) {
463
- for (let item of schemaTypes?.schemas) {
464
- if (type == item.id) {
465
- currentType = item;
466
- break;
467
- }
468
- }
469
- }
470
- if (currentType?.name) {
471
- const cachedValue = objectTypeCache.find(v => v.name === currentType.name);
472
- if (cachedValue) {
473
- return cachedValue;
474
- }
475
- }
476
- if (currentType && currentType.properties) {
477
- object = this.convertObjectPropertiesToObject(currentType.properties, currentType.example ? currentType.example : {}, schemaTypes, objectTypeCache, level ? level + 1 : 0);
478
- }
475
+ if (currentType && currentType.properties) {
476
+ object = this.convertObjectPropertiesToObject(currentType.properties, currentType.example || {}, schemaTypes, objectTypeCache, level + 1, stack);
479
477
  }
480
478
  else if (schema.properties) {
481
- object = this.convertObjectPropertiesToObject(Object
482
- .entries(schema.properties)
483
- .map(e => {
484
- const value = e[1];
485
- return {
486
- name: e[0],
487
- format: value?.format,
488
- type: value?.type
489
- };
490
- }), {}, schemaTypes, objectTypeCache, level ? level + 1 : 0);
479
+ const props = Object.entries(schema.properties).map(([key, val]) => ({
480
+ ...val,
481
+ name: key,
482
+ model: val.$ref || val.items?.$ref || val.additionalProperties?.$ref
483
+ }));
484
+ object = this.convertObjectPropertiesToObject(props, {}, schemaTypes, objectTypeCache, level + 1, stack);
491
485
  }
486
+ if (typeName)
487
+ stack.delete(typeName);
492
488
  const result = {
493
489
  array: array,
494
- name: currentType?.name,
490
+ name: typeName || currentType?.name,
495
491
  value: array ? [object] : object
496
492
  };
497
- if (currentType?.name) {
498
- objectTypeCache.push({
499
- name: currentType.name,
500
- value: result
501
- });
493
+ if (typeName && !objectTypeCache.find(v => v.name === typeName)) {
494
+ objectTypeCache.push({ name: typeName, value: result });
502
495
  }
503
496
  return result;
504
497
  }
505
- convertObjectPropertiesToObject(properties, example, schemaTypes, objectTypeCache, level) {
498
+ convertObjectPropertiesToObject(properties, example, schemaTypes, objectTypeCache, level, stack = new Set()) {
506
499
  if (!properties) {
507
500
  return undefined;
508
501
  }
@@ -543,49 +536,39 @@ class InuOpenApiServices {
543
536
  object[property.name] = false;
544
537
  break;
545
538
  case 'array':
546
- object[property.name] = this.convertArray(property, property.example ? property.example : {}, schemaTypes, objectTypeCache, level + 1);
539
+ object[property.name] = this.convertArray(property, property.example ? property.example : {}, schemaTypes, objectTypeCache, level + 1, stack);
547
540
  break;
548
541
  default:
549
- const subType = this.renderType({ ref: property.ref }, schemaTypes, objectTypeCache, level + 1);
542
+ const subType = this.renderType({ ref: property.ref }, schemaTypes, objectTypeCache, level + 1, stack);
550
543
  object[property.name] = subType?.value;
551
544
  break;
552
545
  }
553
546
  }
554
547
  return object;
555
548
  }
556
- convertArray(property, example, schemaTypes, objectTypeCache, level) {
549
+ convertArray(property, example, schemaTypes, objectTypeCache, level, stack) {
557
550
  const result = [];
558
- const type = property.type ? property.type : 'object';
559
- const sample = example[property.name];
551
+ const model = property.model || property.items?.$ref || property.items?.['$ref'];
552
+ const type = property.items?.type || 'object';
553
+ if (model || type === 'object') {
554
+ const subType = this.renderType({ ref: model, type: type, items: property.items }, schemaTypes, objectTypeCache, level + 1, stack);
555
+ result.push(subType?.value || {});
556
+ return result;
557
+ }
558
+ const sample = example && example[property.name] ? example[property.name][0] : undefined;
560
559
  switch (type) {
561
560
  case 'string':
562
- if ('date' == property.format) {
563
- result.push(sample ? sample : 'yyyyMMdd');
564
- }
565
- else if ('date-time' == property.format) {
566
- result.push(sample ? sample : 'yyyyMMddTHH:mm:ss');
567
- }
568
- else {
569
- result.push(sample ? sample : 'string');
570
- }
561
+ result.push(sample || (property.items?.format === 'date' ? 'yyyyMMdd' : 'string'));
571
562
  break;
572
563
  case 'number':
573
- if ('float' == property.format || 'double' == property.format) {
574
- result.push(sample ? sample : 0.0);
575
- }
576
- else {
577
- result.push(sample ? sample : 0);
578
- }
579
- break;
580
564
  case 'integer':
581
- result.push(sample ? sample : 0);
565
+ result.push(sample || 0);
582
566
  break;
583
567
  case 'boolean':
584
568
  result.push(false);
585
569
  break;
586
570
  default:
587
- const subType = this.renderType({ ref: property.ref }, schemaTypes, objectTypeCache, level + 1);
588
- result.push(subType ? subType.value : {});
571
+ result.push({});
589
572
  break;
590
573
  }
591
574
  return result;
@@ -823,8 +806,10 @@ class InuOpenApiEndpoint {
823
806
  //==================================================================================================================
824
807
  data = input(undefined, ...(ngDevMode ? [{ debugName: "data" }] : []));
825
808
  schemas = input(null, ...(ngDevMode ? [{ debugName: "schemas" }] : []));
809
+ filter = input(undefined, ...(ngDevMode ? [{ debugName: "filter" }] : []));
826
810
  styleClass = signal('', ...(ngDevMode ? [{ debugName: "styleClass" }] : []));
827
811
  display = signal('inu-open-api-endpoint-content-display hidden', ...(ngDevMode ? [{ debugName: "display" }] : []));
812
+ matchFilter = signal(true, ...(ngDevMode ? [{ debugName: "matchFilter" }] : []));
828
813
  parameters = signal(null, ...(ngDevMode ? [{ debugName: "parameters" }] : []));
829
814
  headers = signal(null, ...(ngDevMode ? [{ debugName: "headers" }] : []));
830
815
  options = signal(null, ...(ngDevMode ? [{ debugName: "options" }] : []));
@@ -837,6 +822,11 @@ class InuOpenApiEndpoint {
837
822
  constructor() {
838
823
  effect(() => {
839
824
  this.init();
825
+ this.filter()?.subscribe({
826
+ next: filter => {
827
+ this.resolveMatchFilter(filter);
828
+ }
829
+ });
840
830
  });
841
831
  }
842
832
  init() {
@@ -893,7 +883,7 @@ class InuOpenApiEndpoint {
893
883
  if (data.requestBody?.schema) {
894
884
  const schema = data.requestBody.schema;
895
885
  if (schema?.ref) {
896
- content = JSON.stringify(data.requestBody.schema?.ref, null, 4);
886
+ content = InuJsonUtils.convertToJson(data.requestBody.schema?.ref);
897
887
  }
898
888
  if (schema.name) {
899
889
  name = schema.array ? `${schema.name}[]` : schema.name;
@@ -927,7 +917,7 @@ class InuOpenApiEndpoint {
927
917
  if (mainResponse.schema) {
928
918
  const schema = mainResponse.schema;
929
919
  if (schema?.ref) {
930
- content = JSON.stringify(mainResponse.schema?.ref, null, 4);
920
+ content = InuJsonUtils.convertToJson(mainResponse.schema?.ref);
931
921
  }
932
922
  if (schema.name) {
933
923
  name = schema.array ? `${schema.name}[]` : schema.name;
@@ -998,13 +988,90 @@ class InuOpenApiEndpoint {
998
988
  }
999
989
  return result.join(SPACE);
1000
990
  }
991
+ resolveMatchFilter(filter) {
992
+ const data = this.data();
993
+ if (!data) {
994
+ return;
995
+ }
996
+ let result = true;
997
+ if (filter.uri && filter.uri.length > 0) {
998
+ const regex = new RegExp(filter.uri + '.*');
999
+ result = regex.test(data.uri);
1000
+ if (!result) {
1001
+ this.matchFilter.set(result);
1002
+ return;
1003
+ }
1004
+ }
1005
+ if (filter.verbs.length == 0) {
1006
+ result = false;
1007
+ }
1008
+ else {
1009
+ result = filter.verbs.includes((data.verb ?? '').trim().toUpperCase());
1010
+ }
1011
+ this.matchFilter.set(result);
1012
+ }
1001
1013
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InuOpenApiEndpoint, deps: [], target: i0.ɵɵFactoryTarget.Component });
1002
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: InuOpenApiEndpoint, isStandalone: true, selector: "inu-open-api-endpoint", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, schemas: { classPropertyName: "schemas", publicName: "schemas", isSignal: true, isRequired: false, transformFunction: null } }, providers: [], ngImport: i0, template: "@if (data()) {\n <article [class]=\"styleClass()\">\n <header>\n <h2 (click)=\"toggleDisplay()\">\n <span class=\"inu-endpoint-verb\">{{ data()?.verb }}</span>\n <span class=\"inu-endpoint-url\">{{ data()?.url }}</span>\n </h2>\n <span class=\"button open\" (click)=\"toggleDisplay()\">\n <inu-icon [icon]=\"display() == 'inu-open-api-endpoint-content-display show'?'chevron_up':'chevron_down'\" [size]=\"1\"></inu-icon>\n </span>\n </header>\n\n <div class=\"inu-open-api-endpoint-content\">\n <div [class]=\"display()\">\n <!--==============================================================================================================\n = INFORMATION\n ===============================================================================================================-->\n @if (parameters()) {\n <fieldset class=\"information\">\n <label>Information</label>\n <div class=\"content\">\n <inu-open-api-parameters [data]=\"parameters()\"></inu-open-api-parameters>\n </div>\n </fieldset>\n }\n\n <!--==============================================================================================================\n = HEADERS\n ===============================================================================================================-->\n @if (headers()) {\n <fieldset class=\"headers\">\n <label>Headers</label>\n <div class=\"content\">\n <inu-open-api-parameters [data]=\"headers()\"></inu-open-api-parameters>\n </div>\n </fieldset>\n }\n\n <!--==============================================================================================================\n = OPTION\n ===============================================================================================================-->\n @if (options()) {\n <fieldset class=\"options\">\n <label>Options</label>\n <div class=\"content\">\n <inu-open-api-parameters [data]=\"options()\"></inu-open-api-parameters>\n </div>\n </fieldset>\n }\n\n <!--==============================================================================================================\n = REQUEST\n ===============================================================================================================-->\n @if (data()?.requestBody) {\n <fieldset class=\"request\">\n <label>Request</label>\n <div class=\"content\">\n <div class=\"description\">{{ data()?.requestBody?.description! }}</div>\n <div class=\"content-type\">{{ data()?.requestBody?.contentType! }}</div>\n\n @if (request()) {\n <div class=\"schema\">\n <inu-code [source]=\"request()?.content\" [type]=\"request()?.type\"\n [title]=\"request()?.title\"></inu-code>\n </div>\n }\n </div>\n </fieldset>\n }\n <!--==============================================================================================================\n = RESPONSE\n ===============================================================================================================-->\n\n @if (data()?.responses) {\n <fieldset class=\"response\">\n <label>Response</label>\n\n <div class=\"content\">\n\n <div class=\"response-table\">\n <div class=\"response-table-body\">\n @for (response of data()?.responses; track response.status; let index = $index; let isFirst = $first; let isOdd = $odd) {\n <div [class]=\"getRowClass(index,isFirst, isOdd)\">\n <div [class]=\"computeStatusStyleClass(response.status)\">\n {{ response.status }}\n </div>\n <div class=\"description-content\">\n <inu-open-api-response [data]=\"response\" [schemas]=\"schemas()\"></inu-open-api-response>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n </fieldset>\n }\n </div>\n </div>\n </article>\n}\n\n", styles: [".inu-open-api-endpoint{border:1px solid var(--neutral-light);margin-bottom:0rem}.inu-open-api-endpoint header{display:flex;padding:.25rem 2rem .25rem .25rem;align-items:center}.inu-open-api-endpoint header h2{flex:1;display:flex;gap:2rem;color:var(--text-color);font-weight:400;font-size:160%}.inu-open-api-endpoint header h2 .inu-endpoint-verb{width:5rem;font-weight:700;text-transform:uppercase}.inu-open-api-endpoint header span{display:flex;height:2rem}.inu-open-api-endpoint .inu-open-api-endpoint-content .inu-open-api-endpoint-content-display{display:none}.inu-open-api-endpoint .inu-open-api-endpoint-content .inu-open-api-endpoint-content-display.show{padding:1rem;display:flex;gap:2rem;flex-direction:column;background-color:var(--background)}.inu-open-api-endpoint .inu-open-api-endpoint-content .inu-open-api-endpoint-content-display.show fieldset{padding:1rem;border-left:.15rem solid transparent;transition:border-left-color .15s}.inu-open-api-endpoint .inu-open-api-endpoint-content .inu-open-api-endpoint-content-display.show fieldset:hover{border-left:.15rem solid var(--neutral)}.inu-open-api-endpoint .inu-open-api-endpoint-content .inu-open-api-endpoint-content-display.show fieldset label{font-weight:bolder;font-size:120%;border-bottom:1px solid var(--neutral);width:100%;margin-bottom:2rem}.inu-open-api-endpoint .response .response-table tr{border-bottom:.2rem solid var(--neutral)}.inu-open-api-endpoint .description-content{padding-top:1rem}.inu-open-api-endpoint.get{background:var(--endpoint-get-detail-background);border-color:var(--endpoint-get-background)}.inu-open-api-endpoint.get header h2{color:var(--endpoint-get-background-darker)}.inu-open-api-endpoint.head{background:var(--endpoint-head-detail-background);border-color:var(--endpoint-head-background)}.inu-open-api-endpoint.head header h2{color:var(--endpoint-head-background-darker)}.inu-open-api-endpoint.post{background:var(--endpoint-post-detail-background);border-color:var(--endpoint-post-background)}.inu-open-api-endpoint.post header h2{color:var(--endpoint-post-background-darker)}.inu-open-api-endpoint.put{background:var(--endpoint-put-detail-background);border-color:var(--endpoint-put-background)}.inu-open-api-endpoint.put header h2{color:var(--endpoint-put-background-darker)}.inu-open-api-endpoint.patch{background:var(--endpoint-patch-detail-background);border-color:var(--endpoint-patch-background)}.inu-open-api-endpoint.patch header h2{color:var(--endpoint-patch-background-darker)}.inu-open-api-endpoint.delete{background:var(--endpoint-delete-detail-background);border-color:var(--endpoint-delete-background)}.inu-open-api-endpoint.delete header h2{color:var(--endpoint-delete-background-darker)}.inu-open-api-endpoint.option{background:var(--endpoint-option-detail-background);border-color:var(--endpoint-option-background)}.inu-open-api-endpoint.option{background:var(--endpoint-trace-detail-background);border-color:var(--endpoint-trace-background)}.inu-open-api-endpoint .inu-endpoint-response-status{width:10%;max-width:5rem;min-width:3rem}@media(max-width:768px){.inu-open-api-endpoint .inu-endpoint-response-status{width:100%;max-width:100%;min-width:100%}}.inu-open-api-endpoint .response-table-body .flex-table-body-row{display:flex;flex-direction:row;justify-content:space-between}@media(max-width:768px){.inu-open-api-endpoint .response-table-body .flex-table-body-row{flex-direction:column}}.inu-open-api-endpoint .response-table-body .flex-table-body-row .description-content{flex:1}.inu-open-api-endpoint .inu-endpoint-response-status{margin-right:.5rem;font-weight:700;display:inline-flex;align-items:center}.inu-open-api-endpoint .inu-endpoint-response-status.success{border-right:.25rem solid var(--success);color:var(--success-dark)}@media(max-width:768px){.inu-open-api-endpoint .inu-endpoint-response-status.success{width:100%;border-right:none;border-bottom:.25rem solid var(--success)}}.inu-open-api-endpoint .inu-endpoint-response-status.warning{border-right:.25rem solid var(--warning);color:var(--warning-dark)}@media(max-width:768px){.inu-open-api-endpoint .inu-endpoint-response-status.warning{width:100%;border-right:none;border-bottom:.25rem solid var(--warning)}}.inu-open-api-endpoint .inu-endpoint-response-status.error{border-right:.25rem solid var(--danger);color:var(--danger)}@media(max-width:768px){.inu-open-api-endpoint .inu-endpoint-response-status.error{width:100%;border-right:none;border-bottom:.25rem solid var(--danger)}}\n"], dependencies: [{ kind: "component", type: InuOpenApiParameters, selector: "inu-open-api-parameters", inputs: ["data"] }, { kind: "component", type: InuOpenApiResponse, selector: "inu-open-api-response", inputs: ["data", "schemas"] }, { kind: "component", type: InuCode, selector: "inu-code", inputs: ["source", "url", "tag", "type", "title", "notificationLabel", "notificationMessage", "iconNotification"] }, { kind: "component", type: InuIcon, selector: "inu-icon", inputs: ["icon", "defaultIcon", "styleclass", "size"] }] });
1014
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: InuOpenApiEndpoint, isStandalone: true, selector: "inu-open-api-endpoint", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, schemas: { classPropertyName: "schemas", publicName: "schemas", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null } }, providers: [], ngImport: i0, template: "@if (data() && matchFilter()) {\n <article [class]=\"styleClass()\">\n <header>\n <h2 (click)=\"toggleDisplay()\">\n <span class=\"inu-endpoint-verb\">{{ data()?.verb }}</span>\n <span class=\"inu-endpoint-url\">{{ data()?.url }}</span>\n </h2>\n <span class=\"button open\" (click)=\"toggleDisplay()\">\n <inu-icon [icon]=\"display() == 'inu-open-api-endpoint-content-display show'?'chevron_up':'chevron_down'\" [size]=\"1\"></inu-icon>\n </span>\n </header>\n\n <div class=\"inu-open-api-endpoint-content\">\n <div [class]=\"display()\">\n <!--==============================================================================================================\n = INFORMATION\n ===============================================================================================================-->\n @if (parameters()) {\n <fieldset class=\"information\">\n <label>Information</label>\n <div class=\"content\">\n <inu-open-api-parameters [data]=\"parameters()\"></inu-open-api-parameters>\n </div>\n </fieldset>\n }\n\n <!--==============================================================================================================\n = HEADERS\n ===============================================================================================================-->\n @if (headers()) {\n <fieldset class=\"headers\">\n <label>Headers</label>\n <div class=\"content\">\n <inu-open-api-parameters [data]=\"headers()\"></inu-open-api-parameters>\n </div>\n </fieldset>\n }\n\n <!--==============================================================================================================\n = OPTION\n ===============================================================================================================-->\n @if (options()) {\n <fieldset class=\"options\">\n <label>Options</label>\n <div class=\"content\">\n <inu-open-api-parameters [data]=\"options()\"></inu-open-api-parameters>\n </div>\n </fieldset>\n }\n\n <!--==============================================================================================================\n = REQUEST\n ===============================================================================================================-->\n @if (data()?.requestBody) {\n <fieldset class=\"request\">\n <label>Request</label>\n <div class=\"content\">\n <div class=\"description\">{{ data()?.requestBody?.description! }}</div>\n <div class=\"content-type\">{{ data()?.requestBody?.contentType! }}</div>\n\n @if (request()) {\n <div class=\"schema\">\n <inu-code [source]=\"request()?.content\" [type]=\"request()?.type\"\n [title]=\"request()?.title\"></inu-code>\n </div>\n }\n </div>\n </fieldset>\n }\n <!--==============================================================================================================\n = RESPONSE\n ===============================================================================================================-->\n\n @if (data()?.responses) {\n <fieldset class=\"response\">\n <label>Response</label>\n\n <div class=\"content\">\n\n <div class=\"response-table\">\n <div class=\"response-table-body\">\n @for (response of data()?.responses; track response.status; let index = $index; let isFirst = $first; let isOdd = $odd) {\n <div [class]=\"getRowClass(index,isFirst, isOdd)\">\n <div [class]=\"computeStatusStyleClass(response.status)\">\n {{ response.status }}\n </div>\n <div class=\"description-content\">\n <inu-open-api-response [data]=\"response\" [schemas]=\"schemas()\"></inu-open-api-response>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n </fieldset>\n }\n </div>\n </div>\n </article>\n}\n\n", styles: [".inu-open-api-endpoint{border:1px solid var(--neutral-light);margin-bottom:1rem}.inu-open-api-endpoint header{display:flex;padding:.25rem 2rem .25rem .25rem;align-items:center}.inu-open-api-endpoint header h2{flex:1;display:flex;gap:2rem;color:var(--text-color);font-weight:400;font-size:160%}.inu-open-api-endpoint header h2 .inu-endpoint-verb{width:5rem;font-weight:700;text-transform:uppercase}.inu-open-api-endpoint header span{display:flex;height:2rem}.inu-open-api-endpoint .inu-open-api-endpoint-content .inu-open-api-endpoint-content-display{display:none}.inu-open-api-endpoint .inu-open-api-endpoint-content .inu-open-api-endpoint-content-display.show{padding:1rem;display:flex;gap:2rem;flex-direction:column;background-color:var(--background)}.inu-open-api-endpoint .inu-open-api-endpoint-content .inu-open-api-endpoint-content-display.show fieldset{padding:1rem;border-left:.15rem solid transparent;transition:border-left-color .15s}.inu-open-api-endpoint .inu-open-api-endpoint-content .inu-open-api-endpoint-content-display.show fieldset:hover{border-left:.15rem solid var(--neutral)}.inu-open-api-endpoint .inu-open-api-endpoint-content .inu-open-api-endpoint-content-display.show fieldset label{font-weight:bolder;font-size:120%;border-bottom:1px solid var(--neutral);width:100%;margin-bottom:2rem}.inu-open-api-endpoint .response .response-table tr{border-bottom:.2rem solid var(--neutral)}.inu-open-api-endpoint .description-content{padding-top:1rem}.inu-open-api-endpoint.get{background:var(--endpoint-get-detail-background);border-color:var(--endpoint-get-background)}.inu-open-api-endpoint.get header h2{color:var(--endpoint-get-background-darker)}.inu-open-api-endpoint.head{background:var(--endpoint-head-detail-background);border-color:var(--endpoint-head-background)}.inu-open-api-endpoint.head header h2{color:var(--endpoint-head-background-darker)}.inu-open-api-endpoint.post{background:var(--endpoint-post-detail-background);border-color:var(--endpoint-post-background)}.inu-open-api-endpoint.post header h2{color:var(--endpoint-post-background-darker)}.inu-open-api-endpoint.put{background:var(--endpoint-put-detail-background);border-color:var(--endpoint-put-background)}.inu-open-api-endpoint.put header h2{color:var(--endpoint-put-background-darker)}.inu-open-api-endpoint.patch{background:var(--endpoint-patch-detail-background);border-color:var(--endpoint-patch-background)}.inu-open-api-endpoint.patch header h2{color:var(--endpoint-patch-background-darker)}.inu-open-api-endpoint.delete{background:var(--endpoint-delete-detail-background);border-color:var(--endpoint-delete-background)}.inu-open-api-endpoint.delete header h2{color:var(--endpoint-delete-background-darker)}.inu-open-api-endpoint.option{background:var(--endpoint-option-detail-background);border-color:var(--endpoint-option-background)}.inu-open-api-endpoint.option{background:var(--endpoint-trace-detail-background);border-color:var(--endpoint-trace-background)}.inu-open-api-endpoint .inu-endpoint-response-status{width:10%;max-width:5rem;min-width:3rem}@media(max-width:768px){.inu-open-api-endpoint .inu-endpoint-response-status{width:100%;max-width:100%;min-width:100%}}.inu-open-api-endpoint .response-table-body .flex-table-body-row{display:flex;flex-direction:row;justify-content:space-between}@media(max-width:768px){.inu-open-api-endpoint .response-table-body .flex-table-body-row{flex-direction:column}}.inu-open-api-endpoint .response-table-body .flex-table-body-row .description-content{flex:1}.inu-open-api-endpoint .inu-endpoint-response-status{margin-right:.5rem;font-weight:700;display:inline-flex;align-items:center}.inu-open-api-endpoint .inu-endpoint-response-status.success{border-right:.25rem solid var(--success);color:var(--success-dark)}@media(max-width:768px){.inu-open-api-endpoint .inu-endpoint-response-status.success{width:100%;border-right:none;border-bottom:.25rem solid var(--success)}}.inu-open-api-endpoint .inu-endpoint-response-status.warning{border-right:.25rem solid var(--warning);color:var(--warning-dark)}@media(max-width:768px){.inu-open-api-endpoint .inu-endpoint-response-status.warning{width:100%;border-right:none;border-bottom:.25rem solid var(--warning)}}.inu-open-api-endpoint .inu-endpoint-response-status.error{border-right:.25rem solid var(--danger);color:var(--danger)}@media(max-width:768px){.inu-open-api-endpoint .inu-endpoint-response-status.error{width:100%;border-right:none;border-bottom:.25rem solid var(--danger)}}\n"], dependencies: [{ kind: "component", type: InuOpenApiParameters, selector: "inu-open-api-parameters", inputs: ["data"] }, { kind: "component", type: InuOpenApiResponse, selector: "inu-open-api-response", inputs: ["data", "schemas"] }, { kind: "component", type: InuCode, selector: "inu-code", inputs: ["source", "url", "tag", "type", "title", "notificationLabel", "notificationMessage", "iconNotification"] }, { kind: "component", type: InuIcon, selector: "inu-icon", inputs: ["icon", "defaultIcon", "styleclass", "size"] }] });
1003
1015
  }
1004
1016
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InuOpenApiEndpoint, decorators: [{
1005
1017
  type: Component,
1006
- args: [{ selector: 'inu-open-api-endpoint', standalone: true, providers: [], imports: [InuOpenApiParameters, InuOpenApiResponse, InuCode, InuIcon], template: "@if (data()) {\n <article [class]=\"styleClass()\">\n <header>\n <h2 (click)=\"toggleDisplay()\">\n <span class=\"inu-endpoint-verb\">{{ data()?.verb }}</span>\n <span class=\"inu-endpoint-url\">{{ data()?.url }}</span>\n </h2>\n <span class=\"button open\" (click)=\"toggleDisplay()\">\n <inu-icon [icon]=\"display() == 'inu-open-api-endpoint-content-display show'?'chevron_up':'chevron_down'\" [size]=\"1\"></inu-icon>\n </span>\n </header>\n\n <div class=\"inu-open-api-endpoint-content\">\n <div [class]=\"display()\">\n <!--==============================================================================================================\n = INFORMATION\n ===============================================================================================================-->\n @if (parameters()) {\n <fieldset class=\"information\">\n <label>Information</label>\n <div class=\"content\">\n <inu-open-api-parameters [data]=\"parameters()\"></inu-open-api-parameters>\n </div>\n </fieldset>\n }\n\n <!--==============================================================================================================\n = HEADERS\n ===============================================================================================================-->\n @if (headers()) {\n <fieldset class=\"headers\">\n <label>Headers</label>\n <div class=\"content\">\n <inu-open-api-parameters [data]=\"headers()\"></inu-open-api-parameters>\n </div>\n </fieldset>\n }\n\n <!--==============================================================================================================\n = OPTION\n ===============================================================================================================-->\n @if (options()) {\n <fieldset class=\"options\">\n <label>Options</label>\n <div class=\"content\">\n <inu-open-api-parameters [data]=\"options()\"></inu-open-api-parameters>\n </div>\n </fieldset>\n }\n\n <!--==============================================================================================================\n = REQUEST\n ===============================================================================================================-->\n @if (data()?.requestBody) {\n <fieldset class=\"request\">\n <label>Request</label>\n <div class=\"content\">\n <div class=\"description\">{{ data()?.requestBody?.description! }}</div>\n <div class=\"content-type\">{{ data()?.requestBody?.contentType! }}</div>\n\n @if (request()) {\n <div class=\"schema\">\n <inu-code [source]=\"request()?.content\" [type]=\"request()?.type\"\n [title]=\"request()?.title\"></inu-code>\n </div>\n }\n </div>\n </fieldset>\n }\n <!--==============================================================================================================\n = RESPONSE\n ===============================================================================================================-->\n\n @if (data()?.responses) {\n <fieldset class=\"response\">\n <label>Response</label>\n\n <div class=\"content\">\n\n <div class=\"response-table\">\n <div class=\"response-table-body\">\n @for (response of data()?.responses; track response.status; let index = $index; let isFirst = $first; let isOdd = $odd) {\n <div [class]=\"getRowClass(index,isFirst, isOdd)\">\n <div [class]=\"computeStatusStyleClass(response.status)\">\n {{ response.status }}\n </div>\n <div class=\"description-content\">\n <inu-open-api-response [data]=\"response\" [schemas]=\"schemas()\"></inu-open-api-response>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n </fieldset>\n }\n </div>\n </div>\n </article>\n}\n\n", styles: [".inu-open-api-endpoint{border:1px solid var(--neutral-light);margin-bottom:0rem}.inu-open-api-endpoint header{display:flex;padding:.25rem 2rem .25rem .25rem;align-items:center}.inu-open-api-endpoint header h2{flex:1;display:flex;gap:2rem;color:var(--text-color);font-weight:400;font-size:160%}.inu-open-api-endpoint header h2 .inu-endpoint-verb{width:5rem;font-weight:700;text-transform:uppercase}.inu-open-api-endpoint header span{display:flex;height:2rem}.inu-open-api-endpoint .inu-open-api-endpoint-content .inu-open-api-endpoint-content-display{display:none}.inu-open-api-endpoint .inu-open-api-endpoint-content .inu-open-api-endpoint-content-display.show{padding:1rem;display:flex;gap:2rem;flex-direction:column;background-color:var(--background)}.inu-open-api-endpoint .inu-open-api-endpoint-content .inu-open-api-endpoint-content-display.show fieldset{padding:1rem;border-left:.15rem solid transparent;transition:border-left-color .15s}.inu-open-api-endpoint .inu-open-api-endpoint-content .inu-open-api-endpoint-content-display.show fieldset:hover{border-left:.15rem solid var(--neutral)}.inu-open-api-endpoint .inu-open-api-endpoint-content .inu-open-api-endpoint-content-display.show fieldset label{font-weight:bolder;font-size:120%;border-bottom:1px solid var(--neutral);width:100%;margin-bottom:2rem}.inu-open-api-endpoint .response .response-table tr{border-bottom:.2rem solid var(--neutral)}.inu-open-api-endpoint .description-content{padding-top:1rem}.inu-open-api-endpoint.get{background:var(--endpoint-get-detail-background);border-color:var(--endpoint-get-background)}.inu-open-api-endpoint.get header h2{color:var(--endpoint-get-background-darker)}.inu-open-api-endpoint.head{background:var(--endpoint-head-detail-background);border-color:var(--endpoint-head-background)}.inu-open-api-endpoint.head header h2{color:var(--endpoint-head-background-darker)}.inu-open-api-endpoint.post{background:var(--endpoint-post-detail-background);border-color:var(--endpoint-post-background)}.inu-open-api-endpoint.post header h2{color:var(--endpoint-post-background-darker)}.inu-open-api-endpoint.put{background:var(--endpoint-put-detail-background);border-color:var(--endpoint-put-background)}.inu-open-api-endpoint.put header h2{color:var(--endpoint-put-background-darker)}.inu-open-api-endpoint.patch{background:var(--endpoint-patch-detail-background);border-color:var(--endpoint-patch-background)}.inu-open-api-endpoint.patch header h2{color:var(--endpoint-patch-background-darker)}.inu-open-api-endpoint.delete{background:var(--endpoint-delete-detail-background);border-color:var(--endpoint-delete-background)}.inu-open-api-endpoint.delete header h2{color:var(--endpoint-delete-background-darker)}.inu-open-api-endpoint.option{background:var(--endpoint-option-detail-background);border-color:var(--endpoint-option-background)}.inu-open-api-endpoint.option{background:var(--endpoint-trace-detail-background);border-color:var(--endpoint-trace-background)}.inu-open-api-endpoint .inu-endpoint-response-status{width:10%;max-width:5rem;min-width:3rem}@media(max-width:768px){.inu-open-api-endpoint .inu-endpoint-response-status{width:100%;max-width:100%;min-width:100%}}.inu-open-api-endpoint .response-table-body .flex-table-body-row{display:flex;flex-direction:row;justify-content:space-between}@media(max-width:768px){.inu-open-api-endpoint .response-table-body .flex-table-body-row{flex-direction:column}}.inu-open-api-endpoint .response-table-body .flex-table-body-row .description-content{flex:1}.inu-open-api-endpoint .inu-endpoint-response-status{margin-right:.5rem;font-weight:700;display:inline-flex;align-items:center}.inu-open-api-endpoint .inu-endpoint-response-status.success{border-right:.25rem solid var(--success);color:var(--success-dark)}@media(max-width:768px){.inu-open-api-endpoint .inu-endpoint-response-status.success{width:100%;border-right:none;border-bottom:.25rem solid var(--success)}}.inu-open-api-endpoint .inu-endpoint-response-status.warning{border-right:.25rem solid var(--warning);color:var(--warning-dark)}@media(max-width:768px){.inu-open-api-endpoint .inu-endpoint-response-status.warning{width:100%;border-right:none;border-bottom:.25rem solid var(--warning)}}.inu-open-api-endpoint .inu-endpoint-response-status.error{border-right:.25rem solid var(--danger);color:var(--danger)}@media(max-width:768px){.inu-open-api-endpoint .inu-endpoint-response-status.error{width:100%;border-right:none;border-bottom:.25rem solid var(--danger)}}\n"] }]
1007
- }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], schemas: [{ type: i0.Input, args: [{ isSignal: true, alias: "schemas", required: false }] }] } });
1018
+ args: [{ selector: 'inu-open-api-endpoint', standalone: true, providers: [], imports: [InuOpenApiParameters, InuOpenApiResponse, InuCode, InuIcon], template: "@if (data() && matchFilter()) {\n <article [class]=\"styleClass()\">\n <header>\n <h2 (click)=\"toggleDisplay()\">\n <span class=\"inu-endpoint-verb\">{{ data()?.verb }}</span>\n <span class=\"inu-endpoint-url\">{{ data()?.url }}</span>\n </h2>\n <span class=\"button open\" (click)=\"toggleDisplay()\">\n <inu-icon [icon]=\"display() == 'inu-open-api-endpoint-content-display show'?'chevron_up':'chevron_down'\" [size]=\"1\"></inu-icon>\n </span>\n </header>\n\n <div class=\"inu-open-api-endpoint-content\">\n <div [class]=\"display()\">\n <!--==============================================================================================================\n = INFORMATION\n ===============================================================================================================-->\n @if (parameters()) {\n <fieldset class=\"information\">\n <label>Information</label>\n <div class=\"content\">\n <inu-open-api-parameters [data]=\"parameters()\"></inu-open-api-parameters>\n </div>\n </fieldset>\n }\n\n <!--==============================================================================================================\n = HEADERS\n ===============================================================================================================-->\n @if (headers()) {\n <fieldset class=\"headers\">\n <label>Headers</label>\n <div class=\"content\">\n <inu-open-api-parameters [data]=\"headers()\"></inu-open-api-parameters>\n </div>\n </fieldset>\n }\n\n <!--==============================================================================================================\n = OPTION\n ===============================================================================================================-->\n @if (options()) {\n <fieldset class=\"options\">\n <label>Options</label>\n <div class=\"content\">\n <inu-open-api-parameters [data]=\"options()\"></inu-open-api-parameters>\n </div>\n </fieldset>\n }\n\n <!--==============================================================================================================\n = REQUEST\n ===============================================================================================================-->\n @if (data()?.requestBody) {\n <fieldset class=\"request\">\n <label>Request</label>\n <div class=\"content\">\n <div class=\"description\">{{ data()?.requestBody?.description! }}</div>\n <div class=\"content-type\">{{ data()?.requestBody?.contentType! }}</div>\n\n @if (request()) {\n <div class=\"schema\">\n <inu-code [source]=\"request()?.content\" [type]=\"request()?.type\"\n [title]=\"request()?.title\"></inu-code>\n </div>\n }\n </div>\n </fieldset>\n }\n <!--==============================================================================================================\n = RESPONSE\n ===============================================================================================================-->\n\n @if (data()?.responses) {\n <fieldset class=\"response\">\n <label>Response</label>\n\n <div class=\"content\">\n\n <div class=\"response-table\">\n <div class=\"response-table-body\">\n @for (response of data()?.responses; track response.status; let index = $index; let isFirst = $first; let isOdd = $odd) {\n <div [class]=\"getRowClass(index,isFirst, isOdd)\">\n <div [class]=\"computeStatusStyleClass(response.status)\">\n {{ response.status }}\n </div>\n <div class=\"description-content\">\n <inu-open-api-response [data]=\"response\" [schemas]=\"schemas()\"></inu-open-api-response>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n </fieldset>\n }\n </div>\n </div>\n </article>\n}\n\n", styles: [".inu-open-api-endpoint{border:1px solid var(--neutral-light);margin-bottom:1rem}.inu-open-api-endpoint header{display:flex;padding:.25rem 2rem .25rem .25rem;align-items:center}.inu-open-api-endpoint header h2{flex:1;display:flex;gap:2rem;color:var(--text-color);font-weight:400;font-size:160%}.inu-open-api-endpoint header h2 .inu-endpoint-verb{width:5rem;font-weight:700;text-transform:uppercase}.inu-open-api-endpoint header span{display:flex;height:2rem}.inu-open-api-endpoint .inu-open-api-endpoint-content .inu-open-api-endpoint-content-display{display:none}.inu-open-api-endpoint .inu-open-api-endpoint-content .inu-open-api-endpoint-content-display.show{padding:1rem;display:flex;gap:2rem;flex-direction:column;background-color:var(--background)}.inu-open-api-endpoint .inu-open-api-endpoint-content .inu-open-api-endpoint-content-display.show fieldset{padding:1rem;border-left:.15rem solid transparent;transition:border-left-color .15s}.inu-open-api-endpoint .inu-open-api-endpoint-content .inu-open-api-endpoint-content-display.show fieldset:hover{border-left:.15rem solid var(--neutral)}.inu-open-api-endpoint .inu-open-api-endpoint-content .inu-open-api-endpoint-content-display.show fieldset label{font-weight:bolder;font-size:120%;border-bottom:1px solid var(--neutral);width:100%;margin-bottom:2rem}.inu-open-api-endpoint .response .response-table tr{border-bottom:.2rem solid var(--neutral)}.inu-open-api-endpoint .description-content{padding-top:1rem}.inu-open-api-endpoint.get{background:var(--endpoint-get-detail-background);border-color:var(--endpoint-get-background)}.inu-open-api-endpoint.get header h2{color:var(--endpoint-get-background-darker)}.inu-open-api-endpoint.head{background:var(--endpoint-head-detail-background);border-color:var(--endpoint-head-background)}.inu-open-api-endpoint.head header h2{color:var(--endpoint-head-background-darker)}.inu-open-api-endpoint.post{background:var(--endpoint-post-detail-background);border-color:var(--endpoint-post-background)}.inu-open-api-endpoint.post header h2{color:var(--endpoint-post-background-darker)}.inu-open-api-endpoint.put{background:var(--endpoint-put-detail-background);border-color:var(--endpoint-put-background)}.inu-open-api-endpoint.put header h2{color:var(--endpoint-put-background-darker)}.inu-open-api-endpoint.patch{background:var(--endpoint-patch-detail-background);border-color:var(--endpoint-patch-background)}.inu-open-api-endpoint.patch header h2{color:var(--endpoint-patch-background-darker)}.inu-open-api-endpoint.delete{background:var(--endpoint-delete-detail-background);border-color:var(--endpoint-delete-background)}.inu-open-api-endpoint.delete header h2{color:var(--endpoint-delete-background-darker)}.inu-open-api-endpoint.option{background:var(--endpoint-option-detail-background);border-color:var(--endpoint-option-background)}.inu-open-api-endpoint.option{background:var(--endpoint-trace-detail-background);border-color:var(--endpoint-trace-background)}.inu-open-api-endpoint .inu-endpoint-response-status{width:10%;max-width:5rem;min-width:3rem}@media(max-width:768px){.inu-open-api-endpoint .inu-endpoint-response-status{width:100%;max-width:100%;min-width:100%}}.inu-open-api-endpoint .response-table-body .flex-table-body-row{display:flex;flex-direction:row;justify-content:space-between}@media(max-width:768px){.inu-open-api-endpoint .response-table-body .flex-table-body-row{flex-direction:column}}.inu-open-api-endpoint .response-table-body .flex-table-body-row .description-content{flex:1}.inu-open-api-endpoint .inu-endpoint-response-status{margin-right:.5rem;font-weight:700;display:inline-flex;align-items:center}.inu-open-api-endpoint .inu-endpoint-response-status.success{border-right:.25rem solid var(--success);color:var(--success-dark)}@media(max-width:768px){.inu-open-api-endpoint .inu-endpoint-response-status.success{width:100%;border-right:none;border-bottom:.25rem solid var(--success)}}.inu-open-api-endpoint .inu-endpoint-response-status.warning{border-right:.25rem solid var(--warning);color:var(--warning-dark)}@media(max-width:768px){.inu-open-api-endpoint .inu-endpoint-response-status.warning{width:100%;border-right:none;border-bottom:.25rem solid var(--warning)}}.inu-open-api-endpoint .inu-endpoint-response-status.error{border-right:.25rem solid var(--danger);color:var(--danger)}@media(max-width:768px){.inu-open-api-endpoint .inu-endpoint-response-status.error{width:100%;border-right:none;border-bottom:.25rem solid var(--danger)}}\n"] }]
1019
+ }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], schemas: [{ type: i0.Input, args: [{ isSignal: true, alias: "schemas", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }] } });
1020
+
1021
+ class InuOpenApiFilter {
1022
+ //==================================================================================================================
1023
+ // ATTRIBUTES
1024
+ //==================================================================================================================
1025
+ openApi = input(...(ngDevMode ? [undefined, { debugName: "openApi" }] : []));
1026
+ filterChanged = output();
1027
+ formModel = signal({
1028
+ uri: '',
1029
+ verbs: []
1030
+ }, ...(ngDevMode ? [{ debugName: "formModel" }] : []));
1031
+ formFilter = form(this.formModel);
1032
+ verbs = computed(() => {
1033
+ const paths = this.openApi()?.paths ?? [];
1034
+ const result = [];
1035
+ const currentVerbs = [];
1036
+ for (let path of paths) {
1037
+ if (!path.verb) {
1038
+ continue;
1039
+ }
1040
+ const verb = path.verb.trim().toUpperCase();
1041
+ if (!currentVerbs.includes(verb)) {
1042
+ currentVerbs.push(verb);
1043
+ }
1044
+ }
1045
+ currentVerbs.sort();
1046
+ for (let verb of currentVerbs) {
1047
+ result.push({ id: verb, value: verb, title: verb, styleClass: `verb-${verb.toUpperCase()}`, selected: true });
1048
+ }
1049
+ return result;
1050
+ }, ...(ngDevMode ? [{ debugName: "verbs" }] : []));
1051
+ //==================================================================================================================
1052
+ // INIT
1053
+ //==================================================================================================================
1054
+ constructor() {
1055
+ toObservable(this.formModel)
1056
+ .pipe(debounceTime(1), distinctUntilChanged(), takeUntilDestroyed())
1057
+ .subscribe(value => {
1058
+ this.onValueChanged(value);
1059
+ });
1060
+ }
1061
+ onValueChanged(value) {
1062
+ this.filterChanged.emit(value);
1063
+ }
1064
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InuOpenApiFilter, deps: [], target: i0.ɵɵFactoryTarget.Component });
1065
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", type: InuOpenApiFilter, isStandalone: true, selector: "inu-open-api-filter", inputs: { openApi: { classPropertyName: "openApi", publicName: "openApi", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChanged: "filterChanged" }, providers: [], ngImport: i0, template: "<fieldset class=\"inu-open-api-filter\">\n <legend>Filters</legend>\n <div class=\"form-row\">\n\n <div class=\"form-col\">\n <div class=\"form-cell w100\">\n <inu-input-text label=\"Uri\"\n name=\"uri\"\n [formField]=\"formFilter.uri!\"></inu-input-text>\n </div>\n </div>\n\n\n <div class=\"form-col\">\n <div class=\"form-cell w100\">\n <inu-checkbox-group label=\"Verbs\"\n [formField]=\"formFilter.verbs\"\n [values]=\"verbs()\"></inu-checkbox-group>\n </div>\n\n </div>\n </div>\n</fieldset>\n", styles: [""], dependencies: [{ kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"] }, { kind: "component", type: InuCheckboxGroup, selector: "inu-checkbox-group", inputs: ["disabled", "label", "required", "values", "vertical", "value"], outputs: ["changed", "valueChange"] }, { kind: "component", type: InuInputText, selector: "inu-input-text", inputs: ["disabled", "label", "icon", "name", "debounce", "type", "required", "value", "styleClass"], outputs: ["valueChange", "changed"] }] });
1066
+ }
1067
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InuOpenApiFilter, decorators: [{
1068
+ type: Component,
1069
+ args: [{ selector: 'inu-open-api-filter', standalone: true, providers: [], imports: [
1070
+ FormField,
1071
+ InuCheckboxGroup,
1072
+ InuInputText
1073
+ ], template: "<fieldset class=\"inu-open-api-filter\">\n <legend>Filters</legend>\n <div class=\"form-row\">\n\n <div class=\"form-col\">\n <div class=\"form-cell w100\">\n <inu-input-text label=\"Uri\"\n name=\"uri\"\n [formField]=\"formFilter.uri!\"></inu-input-text>\n </div>\n </div>\n\n\n <div class=\"form-col\">\n <div class=\"form-cell w100\">\n <inu-checkbox-group label=\"Verbs\"\n [formField]=\"formFilter.verbs\"\n [values]=\"verbs()\"></inu-checkbox-group>\n </div>\n\n </div>\n </div>\n</fieldset>\n" }]
1074
+ }], ctorParameters: () => [], propDecorators: { openApi: [{ type: i0.Input, args: [{ isSignal: true, alias: "openApi", required: false }] }], filterChanged: [{ type: i0.Output, args: ["filterChanged"] }] } });
1008
1075
 
1009
1076
  const CACHE_PREFIX = 'inu-open-api_';
1010
1077
  class InuOpenApi {
@@ -1017,6 +1084,7 @@ class InuOpenApi {
1017
1084
  cache = inject(InuCacheServices);
1018
1085
  inuOpenApiService = inject(InuOpenApiServices);
1019
1086
  _value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : []));
1087
+ filter = new ObservableSubscriber();
1020
1088
  //====================================================================================================================
1021
1089
  // INITIALIZE
1022
1090
  //====================================================================================================================
@@ -1080,7 +1148,7 @@ class InuOpenApi {
1080
1148
  });
1081
1149
  }
1082
1150
  saveFile(data) {
1083
- const jsonString = JSON.stringify(data, null, 2);
1151
+ const jsonString = InuJsonUtils.convertToJson(data);
1084
1152
  const blob = new Blob([jsonString], { type: 'application/json' });
1085
1153
  const url = window.URL.createObjectURL(blob);
1086
1154
  const link = document.createElement('a');
@@ -1107,15 +1175,19 @@ class InuOpenApi {
1107
1175
  this.cache.set(cacheKey, value);
1108
1176
  }
1109
1177
  }
1178
+ onFilterChanged(event) {
1179
+ this.filter.next(event);
1180
+ }
1110
1181
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InuOpenApi, deps: [], target: i0.ɵɵFactoryTarget.Component });
1111
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: InuOpenApi, isStandalone: true, selector: "inu-open-api", inputs: { url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"inu-open-api\">\n @if(_value()){\n\n <section>\n @if(_value()?.info){\n <header class=\"inu-open-api-main-header\">\n <div class=\"inu-open-api-main-header-detail\">\n <h2>{{_value()?.info?.title!}}</h2>\n <h3>{{_value()?.info?.version!}}</h3>\n <p>\n {{_value()?.info?.description!}}\n </p>\n </div>\n\n <ul class=\"inu-open-api-main-actions\">\n @if(url()){\n <li>\n <inu-icon [size]=\"1.5\" icon=\"download\" (click)=\"download()\"></inu-icon>\n </li>\n }\n </ul>\n </header>\n }\n\n <!--<inu-open-api-filter></inu-open-api-filter>-->\n <div class=\"endpoints\">\n @if(_value()?.paths){\n @for (endpoint of _value()?.paths;track endpoint.uri;) {\n <inu-open-api-endpoint [data]=\"endpoint\" [schemas]=\"_value()?.components?.schemas\"></inu-open-api-endpoint>\n }\n }\n </div>\n </section>\n }\n</div>\n", styles: [".inu-open-api .inu-open-api-main-header{display:flex}.inu-open-api .inu-open-api-main-header .inu-open-api-main-header-detail{flex:1}.inu-open-api .inu-open-api-main-header .inu-open-api-main-actions{margin:0;padding:0}.inu-open-api .inu-open-api-main-header .inu-open-api-main-actions li{list-style:none;display:flex}.inu-open-api .inu-open-api-main-header .inu-open-api-main-actions li ::ng-deep svg{cursor:pointer}.inu-open-api .inu-open-api-main-header .inu-open-api-main-actions li ::ng-deep svg:hover{fill:var(--secondary)}.inu-open-api .endpoints{display:flex;flex-direction:column;gap:1rem}\n"], dependencies: [{ kind: "component", type: InuOpenApiEndpoint, selector: "inu-open-api-endpoint", inputs: ["data", "schemas"] }, { kind: "component", type: InuIcon, selector: "inu-icon", inputs: ["icon", "defaultIcon", "styleclass", "size"] }] });
1182
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: InuOpenApi, isStandalone: true, selector: "inu-open-api", inputs: { url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"inu-open-api\">\n @if(_value()){\n\n <section>\n @if(_value()?.info){\n <header class=\"inu-open-api-main-header\">\n <div class=\"inu-open-api-main-header-detail\">\n <h2>{{_value()?.info?.title!}}</h2>\n <h3>{{_value()?.info?.version!}}</h3>\n <p>\n {{_value()?.info?.description!}}\n </p>\n </div>\n\n <ul class=\"inu-open-api-main-actions\">\n @if(url()){\n <li>\n <inu-icon [size]=\"1.5\" icon=\"download\" (click)=\"download()\"></inu-icon>\n </li>\n }\n </ul>\n </header>\n }\n\n <inu-open-api-filter [openApi]=\"_value()\" (filterChanged)=\"onFilterChanged($event)\"></inu-open-api-filter>\n <div class=\"endpoints\">\n @if(_value()?.paths){\n @for (endpoint of _value()?.paths;track endpoint.uri;) {\n <inu-open-api-endpoint [data]=\"endpoint\"\n [filter]=\"filter.observable()\"\n [schemas]=\"_value()?.components?.schemas\"></inu-open-api-endpoint>\n }\n }\n </div>\n </section>\n }\n</div>\n", styles: [".inu-open-api .inu-open-api-main-header{display:flex}.inu-open-api .inu-open-api-main-header .inu-open-api-main-header-detail{flex:1}.inu-open-api .inu-open-api-main-header .inu-open-api-main-actions{margin:0;padding:0}.inu-open-api .inu-open-api-main-header .inu-open-api-main-actions li{list-style:none;display:flex}.inu-open-api .inu-open-api-main-header .inu-open-api-main-actions li ::ng-deep svg{cursor:pointer}.inu-open-api .inu-open-api-main-header .inu-open-api-main-actions li ::ng-deep svg:hover{fill:var(--secondary)}.inu-open-api .endpoints{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "component", type: InuOpenApiEndpoint, selector: "inu-open-api-endpoint", inputs: ["data", "schemas", "filter"] }, { kind: "component", type: InuIcon, selector: "inu-icon", inputs: ["icon", "defaultIcon", "styleclass", "size"] }, { kind: "component", type: InuOpenApiFilter, selector: "inu-open-api-filter", inputs: ["openApi"], outputs: ["filterChanged"] }] });
1112
1183
  }
1113
1184
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: InuOpenApi, decorators: [{
1114
1185
  type: Component,
1115
1186
  args: [{ selector: 'inu-open-api', standalone: true, imports: [
1116
1187
  InuOpenApiEndpoint,
1117
- InuIcon
1118
- ], template: "<div class=\"inu-open-api\">\n @if(_value()){\n\n <section>\n @if(_value()?.info){\n <header class=\"inu-open-api-main-header\">\n <div class=\"inu-open-api-main-header-detail\">\n <h2>{{_value()?.info?.title!}}</h2>\n <h3>{{_value()?.info?.version!}}</h3>\n <p>\n {{_value()?.info?.description!}}\n </p>\n </div>\n\n <ul class=\"inu-open-api-main-actions\">\n @if(url()){\n <li>\n <inu-icon [size]=\"1.5\" icon=\"download\" (click)=\"download()\"></inu-icon>\n </li>\n }\n </ul>\n </header>\n }\n\n <!--<inu-open-api-filter></inu-open-api-filter>-->\n <div class=\"endpoints\">\n @if(_value()?.paths){\n @for (endpoint of _value()?.paths;track endpoint.uri;) {\n <inu-open-api-endpoint [data]=\"endpoint\" [schemas]=\"_value()?.components?.schemas\"></inu-open-api-endpoint>\n }\n }\n </div>\n </section>\n }\n</div>\n", styles: [".inu-open-api .inu-open-api-main-header{display:flex}.inu-open-api .inu-open-api-main-header .inu-open-api-main-header-detail{flex:1}.inu-open-api .inu-open-api-main-header .inu-open-api-main-actions{margin:0;padding:0}.inu-open-api .inu-open-api-main-header .inu-open-api-main-actions li{list-style:none;display:flex}.inu-open-api .inu-open-api-main-header .inu-open-api-main-actions li ::ng-deep svg{cursor:pointer}.inu-open-api .inu-open-api-main-header .inu-open-api-main-actions li ::ng-deep svg:hover{fill:var(--secondary)}.inu-open-api .endpoints{display:flex;flex-direction:column;gap:1rem}\n"] }]
1188
+ InuIcon,
1189
+ InuOpenApiFilter
1190
+ ], template: "<div class=\"inu-open-api\">\n @if(_value()){\n\n <section>\n @if(_value()?.info){\n <header class=\"inu-open-api-main-header\">\n <div class=\"inu-open-api-main-header-detail\">\n <h2>{{_value()?.info?.title!}}</h2>\n <h3>{{_value()?.info?.version!}}</h3>\n <p>\n {{_value()?.info?.description!}}\n </p>\n </div>\n\n <ul class=\"inu-open-api-main-actions\">\n @if(url()){\n <li>\n <inu-icon [size]=\"1.5\" icon=\"download\" (click)=\"download()\"></inu-icon>\n </li>\n }\n </ul>\n </header>\n }\n\n <inu-open-api-filter [openApi]=\"_value()\" (filterChanged)=\"onFilterChanged($event)\"></inu-open-api-filter>\n <div class=\"endpoints\">\n @if(_value()?.paths){\n @for (endpoint of _value()?.paths;track endpoint.uri;) {\n <inu-open-api-endpoint [data]=\"endpoint\"\n [filter]=\"filter.observable()\"\n [schemas]=\"_value()?.components?.schemas\"></inu-open-api-endpoint>\n }\n }\n </div>\n </section>\n }\n</div>\n", styles: [".inu-open-api .inu-open-api-main-header{display:flex}.inu-open-api .inu-open-api-main-header .inu-open-api-main-header-detail{flex:1}.inu-open-api .inu-open-api-main-header .inu-open-api-main-actions{margin:0;padding:0}.inu-open-api .inu-open-api-main-header .inu-open-api-main-actions li{list-style:none;display:flex}.inu-open-api .inu-open-api-main-header .inu-open-api-main-actions li ::ng-deep svg{cursor:pointer}.inu-open-api .inu-open-api-main-header .inu-open-api-main-actions li ::ng-deep svg:hover{fill:var(--secondary)}.inu-open-api .endpoints{display:flex;flex-direction:column}\n"] }]
1119
1191
  }], ctorParameters: () => [], propDecorators: { url: [{ type: i0.Input, args: [{ isSignal: true, alias: "url", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
1120
1192
 
1121
1193
  class InuOpenApiRequest {