Merge pull request #77 from gjovanovicst/main

Implemented showcase doc for input-text component
adaleks · Nov 11, 2023 · ea6025a · ea6025a
2 parents 3724b9e + 19489b8
commit ea6025a
Show file tree

Hide file tree

Showing 42 changed files with 1,727 additions and 362 deletions.
diff --git a/packages/angular/projects/anywhere-ui/src/lib/directives/proxies.ts b/packages/angular/projects/anywhere-ui/src/lib/directives/proxies.ts
@@ -1148,3 +1148,89 @@ export class InputSwitchPreselection {
 export declare interface InputSwitchPreselection extends Components.InputSwitchPreselection {}
 
 
+@ProxyCmp({
+  inputs: ['textId', 'textTitle']
+})
+@Component({
+  selector: 'input-text-basic',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['textId', 'textTitle'],
+})
+export class InputTextBasic {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface InputTextBasic extends Components.InputTextBasic {}
+
+
+@ProxyCmp({
+})
+@Component({
+  selector: 'input-text-disabled',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: [],
+})
+export class InputTextDisabled {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface InputTextDisabled extends Components.InputTextDisabled {}
+
+
+@ProxyCmp({
+})
+@Component({
+  selector: 'input-text-float-label',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: [],
+})
+export class InputTextFloatLabel {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface InputTextFloatLabel extends Components.InputTextFloatLabel {}
+
+
+@ProxyCmp({
+  inputs: ['textId', 'textTitle']
+})
+@Component({
+  selector: 'input-text-icons',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['textId', 'textTitle'],
+})
+export class InputTextIcons {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface InputTextIcons extends Components.InputTextIcons {}
+
+
diff --git a/packages/core/src/app/css/app.css b/packages/core/src/app/css/app.css
diff --git a/packages/core/src/app/scss/_topbar.scss b/packages/core/src/app/scss/_topbar.scss
@@ -11,7 +11,7 @@
     position: sticky;
     top: 0;
     left: 0;
-    z-index: 997;
+    z-index: 1100;
     // background-color: var(--surface-b);
     -webkit-backdrop-filter: blur(8px);
     backdrop-filter: blur(8px);

diff --git a/packages/core/src/app/views/InputSwitch/InputSwitch.html b/packages/core/src/app/views/InputSwitch/InputSwitch.html
@@ -1,23 +1,3 @@
-<!-- <div class="content-section introduction">
-  <div class="feature-intro">
-    <h1>InputSwitch</h1>
-    <p>InputSwitch is used to select a boolean value.</p>
-  </div>
-  <app-demoactions>
-    <div class="app-demoactions any-d-flex any-ai-end any-jc-end any-mt-3">
-      <any-button id="view_on_github" icon="fa-brands:github"
-        style-class="any-button-rounded any-button-text any-button-lg any-button-plain"></any-button>
-    </div>
-  </app-demoactions>
-</div>
-<div class="content-section">
-  <div class="full-card">
-    <h5>Basic</h5>
-    <any-input-switch id="is1"></any-input-switch>
-    <h5>PreSelection</h5>
-    <any-input-switch id="is2"></any-input-switch>
-  </div>
-</div> -->
 <app-doc id="app-doc" docTitle="InputSwitch Component" header="InputSwitch"
   description="InputSwitch is used to select a boolean value."
   github-page="https://github.com/adaleks/anywhere-ui/tree/main/packages/core/src/components/input-switch"></app-doc>
diff --git a/packages/core/src/app/views/InputText/InputText.html b/packages/core/src/app/views/InputText/InputText.html
@@ -1,34 +1,3 @@
-<div class="content-section introduction">
-  <div class="feature-intro">
-    <h1>InputText</h1>
-    <p>InputText renders a text field to enter data.</p>
-  </div>
-  <app-demoactions>
-    <div class="app-demoactions any-d-flex any-ai-end any-jc-end any-mt-3">
-      <any-button id="view_on_github" icon="fa-brands:github"
-        style-class="any-button-rounded any-button-text any-button-lg any-button-plain"></any-button>
-    </div>
-  </app-demoactions>
-</div>
-<div class="content-section">
-  <div class="full-card">
-    <h5>Basic</h5>
-    <any-input-text id="it1"></any-input-text>
-
-    <h5>Float Label</h5>
-    <any-input-text id="it2"></any-input-text>
-
-    <h5>Disabled</h5>
-    <any-input-text id="it3"></any-input-text>
-
-    <h5>Left Icon</h5>
-    <any-input-text id="it4">
-      <i slot="iconLeft" class="iconify" data-icon="fa-solid:search"></i>
-    </any-input-text>
-
-    <h5>Right Icon</h5>
-    <any-input-text id="it5">
-      <i slot="iconRight" class="iconify" data-icon="fa-solid:spinner"></i>
-    </any-input-text>
-  </div>
-</div>
+<app-doc id="app-doc" docTitle="InputText Component" header="InputText" description="The InputText component is a wrapper to the HTML input element with custom styling and additional
+  functionality."
+  github-page="https://github.com/adaleks/anywhere-ui/tree/main/packages/core/src/components/input-text"></app-doc>
diff --git a/packages/core/src/app/views/InputText/InputText.js b/packages/core/src/app/views/InputText/InputText.js
@@ -1,48 +1,41 @@
-import AbstractView from "../AbstractView.js";
-
-export default class extends AbstractView {
-  constructor(params) {
-    super(params);
-    this.setTitle("InputText");
-  }
-
-  executeScript() {
-    this.viewOnGithubBtn = document.querySelector("#view_on_github");
-    this.viewOnGithubBtn.addEventListener("aOnClick", (event) => {
-      window.open('https://github.com/adaleks/anywhere-ui/tree/main/packages/core/src/components/input-text', '_blank');
-    });
-    this.it1 = document.querySelector("#it1");
-    this.it2 = document.querySelector("#it2");
-    this.it3 = document.querySelector("#it3");
-    this.it4 = document.querySelector("#it4");
-    this.it5 = document.querySelector("#it5");
-    // this.it1.value = "Goran";
-    // it1 options
-    this.it1.label = "Username";
-    this.it1.inputWrapperClass = "any-field block";
-    // this.it1.disabled = true;
-    // this.it1.readonly = true;
-    this.it1.addEventListener("valueChange", (event) => {
-      console.log("Input Value changed:", event);
-    });
-
-    this.it2.floatLabel = true;
-    this.it2.label = "Username";
-
-    this.it3.disabled = true;
-    this.it3.placeholder = "Disabled";
-
-    this.it4.inputWrapperClass = "any-input-icon-left";
-    this.it4.placeholder = "Search";
-
-    this.it5.inputWrapperClass = "any-input-icon-right";
-    this.it5.rightIconClass = "any-spin";
-  }
-
-  async getHtml() {
-    return fetch('app/views/InputText/InputText.html')
-      .then(data => {
-        return data.text();
-      });
-  }
-}
+import AbstractView from "../AbstractView.js";
+
+export default class extends AbstractView {
+  constructor(params) {
+    super(params);
+    this.setTitle("InputText");
+  }
+
+  executeScript() {
+    this.appDoc = document.querySelector("#app-doc");
+    this.appDoc.apiDocs = ["any-input-text"];
+    this.appDoc.docs = [
+      {
+        id: "basic",
+        label: "Basic",
+        component: "input-text-basic",
+      },
+      {
+        id: "icons",
+        label: "Icons",
+        component: "input-text-icons",
+      },
+      {
+        id: "float-label",
+        label: "Float Label",
+        component: "input-text-float-label",
+      },
+      {
+        id: "disabled",
+        label: "Disabled",
+        component: "input-text-disabled",
+      },
+    ];
+  }
+
+  async getHtml() {
+    return fetch("app/views/InputText/InputText.html").then((data) => {
+      return data.text();
+    });
+  }
+}