Skip to content

Commit ea6025a

Browse files
gjovanovicstgjovanovicst
authored
Merge pull request #77 from gjovanovicst/main
Implemented showcase doc for input-text component
2 parents 3724b9e + 19489b8 commit ea6025a

File tree

42 files changed

+1727
-362
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+1727
-362
lines changed

‎packages/angular/projects/anywhere-ui/src/lib/directives/proxies.ts

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1148,3 +1148,89 @@ export class InputSwitchPreselection {
11481148
export declare interface InputSwitchPreselection extends Components.InputSwitchPreselection {}
11491149

11501150

1151+
@ProxyCmp({
1152+
inputs: ['textId', 'textTitle']
1153+
})
1154+
@Component({
1155+
selector: 'input-text-basic',
1156+
changeDetection: ChangeDetectionStrategy.OnPush,
1157+
template: '<ng-content></ng-content>',
1158+
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
1159+
inputs: ['textId', 'textTitle'],
1160+
})
1161+
export class InputTextBasic {
1162+
protected el: HTMLElement;
1163+
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
1164+
c.detach();
1165+
this.el = r.nativeElement;
1166+
}
1167+
}
1168+
1169+
1170+
export declare interface InputTextBasic extends Components.InputTextBasic {}
1171+
1172+
1173+
@ProxyCmp({
1174+
})
1175+
@Component({
1176+
selector: 'input-text-disabled',
1177+
changeDetection: ChangeDetectionStrategy.OnPush,
1178+
template: '<ng-content></ng-content>',
1179+
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
1180+
inputs: [],
1181+
})
1182+
export class InputTextDisabled {
1183+
protected el: HTMLElement;
1184+
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
1185+
c.detach();
1186+
this.el = r.nativeElement;
1187+
}
1188+
}
1189+
1190+
1191+
export declare interface InputTextDisabled extends Components.InputTextDisabled {}
1192+
1193+
1194+
@ProxyCmp({
1195+
})
1196+
@Component({
1197+
selector: 'input-text-float-label',
1198+
changeDetection: ChangeDetectionStrategy.OnPush,
1199+
template: '<ng-content></ng-content>',
1200+
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
1201+
inputs: [],
1202+
})
1203+
export class InputTextFloatLabel {
1204+
protected el: HTMLElement;
1205+
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
1206+
c.detach();
1207+
this.el = r.nativeElement;
1208+
}
1209+
}
1210+
1211+
1212+
export declare interface InputTextFloatLabel extends Components.InputTextFloatLabel {}
1213+
1214+
1215+
@ProxyCmp({
1216+
inputs: ['textId', 'textTitle']
1217+
})
1218+
@Component({
1219+
selector: 'input-text-icons',
1220+
changeDetection: ChangeDetectionStrategy.OnPush,
1221+
template: '<ng-content></ng-content>',
1222+
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
1223+
inputs: ['textId', 'textTitle'],
1224+
})
1225+
export class InputTextIcons {
1226+
protected el: HTMLElement;
1227+
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
1228+
c.detach();
1229+
this.el = r.nativeElement;
1230+
}
1231+
}
1232+
1233+
1234+
export declare interface InputTextIcons extends Components.InputTextIcons {}
1235+
1236+

‎packages/core/src/app/css/app.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/core/src/app/scss/_topbar.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
position: sticky;
1212
top: 0;
1313
left: 0;
14-
z-index: 997;
14+
z-index: 1100;
1515
// background-color: var(--surface-b);
1616
-webkit-backdrop-filter: blur(8px);
1717
backdrop-filter: blur(8px);

‎packages/core/src/app/views/InputSwitch/InputSwitch.html

Lines changed: 0 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,3 @@
1-
<!-- <div class="content-section introduction">
2-
<div class="feature-intro">
3-
<h1>InputSwitch</h1>
4-
<p>InputSwitch is used to select a boolean value.</p>
5-
</div>
6-
<app-demoactions>
7-
<div class="app-demoactions any-d-flex any-ai-end any-jc-end any-mt-3">
8-
<any-button id="view_on_github" icon="fa-brands:github"
9-
style-class="any-button-rounded any-button-text any-button-lg any-button-plain"></any-button>
10-
</div>
11-
</app-demoactions>
12-
</div>
13-
<div class="content-section">
14-
<div class="full-card">
15-
<h5>Basic</h5>
16-
<any-input-switch id="is1"></any-input-switch>
17-
<h5>PreSelection</h5>
18-
<any-input-switch id="is2"></any-input-switch>
19-
</div>
20-
</div> -->
211
<app-doc id="app-doc" docTitle="InputSwitch Component" header="InputSwitch"
222
description="InputSwitch is used to select a boolean value."
233
github-page="https://github.com/adaleks/anywhere-ui/tree/main/packages/core/src/components/input-switch"></app-doc>

‎packages/core/src/app/views/InputText/InputText.html

Lines changed: 3 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,3 @@
1-
<div class="content-section introduction">
2-
<div class="feature-intro">
3-
<h1>InputText</h1>
4-
<p>InputText renders a text field to enter data.</p>
5-
</div>
6-
<app-demoactions>
7-
<div class="app-demoactions any-d-flex any-ai-end any-jc-end any-mt-3">
8-
<any-button id="view_on_github" icon="fa-brands:github"
9-
style-class="any-button-rounded any-button-text any-button-lg any-button-plain"></any-button>
10-
</div>
11-
</app-demoactions>
12-
</div>
13-
<div class="content-section">
14-
<div class="full-card">
15-
<h5>Basic</h5>
16-
<any-input-text id="it1"></any-input-text>
17-
18-
<h5>Float Label</h5>
19-
<any-input-text id="it2"></any-input-text>
20-
21-
<h5>Disabled</h5>
22-
<any-input-text id="it3"></any-input-text>
23-
24-
<h5>Left Icon</h5>
25-
<any-input-text id="it4">
26-
<i slot="iconLeft" class="iconify" data-icon="fa-solid:search"></i>
27-
</any-input-text>
28-
29-
<h5>Right Icon</h5>
30-
<any-input-text id="it5">
31-
<i slot="iconRight" class="iconify" data-icon="fa-solid:spinner"></i>
32-
</any-input-text>
33-
</div>
34-
</div>
1+
<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
2+
functionality."
3+
github-page="https://github.com/adaleks/anywhere-ui/tree/main/packages/core/src/components/input-text"></app-doc>

‎packages/core/src/app/views/InputText/InputText.js

Lines changed: 41 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,41 @@
1-
import AbstractView from "../AbstractView.js";
2-
3-
export default class extends AbstractView {
4-
constructor(params) {
5-
super(params);
6-
this.setTitle("InputText");
7-
}
8-
9-
executeScript() {
10-
this.viewOnGithubBtn = document.querySelector("#view_on_github");
11-
this.viewOnGithubBtn.addEventListener("aOnClick", (event) => {
12-
window.open('https://github.com/adaleks/anywhere-ui/tree/main/packages/core/src/components/input-text', '_blank');
13-
});
14-
this.it1 = document.querySelector("#it1");
15-
this.it2 = document.querySelector("#it2");
16-
this.it3 = document.querySelector("#it3");
17-
this.it4 = document.querySelector("#it4");
18-
this.it5 = document.querySelector("#it5");
19-
// this.it1.value = "Goran";
20-
// it1 options
21-
this.it1.label = "Username";
22-
this.it1.inputWrapperClass = "any-field block";
23-
// this.it1.disabled = true;
24-
// this.it1.readonly = true;
25-
this.it1.addEventListener("valueChange", (event) => {
26-
console.log("Input Value changed:", event);
27-
});
28-
29-
this.it2.floatLabel = true;
30-
this.it2.label = "Username";
31-
32-
this.it3.disabled = true;
33-
this.it3.placeholder = "Disabled";
34-
35-
this.it4.inputWrapperClass = "any-input-icon-left";
36-
this.it4.placeholder = "Search";
37-
38-
this.it5.inputWrapperClass = "any-input-icon-right";
39-
this.it5.rightIconClass = "any-spin";
40-
}
41-
42-
async getHtml() {
43-
return fetch('app/views/InputText/InputText.html')
44-
.then(data => {
45-
return data.text();
46-
});
47-
}
48-
}
1+
import AbstractView from "../AbstractView.js";
2+
3+
export default class extends AbstractView {
4+
constructor(params) {
5+
super(params);
6+
this.setTitle("InputText");
7+
}
8+
9+
executeScript() {
10+
this.appDoc = document.querySelector("#app-doc");
11+
this.appDoc.apiDocs = ["any-input-text"];
12+
this.appDoc.docs = [
13+
{
14+
id: "basic",
15+
label: "Basic",
16+
component: "input-text-basic",
17+
},
18+
{
19+
id: "icons",
20+
label: "Icons",
21+
component: "input-text-icons",
22+
},
23+
{
24+
id: "float-label",
25+
label: "Float Label",
26+
component: "input-text-float-label",
27+
},
28+
{
29+
id: "disabled",
30+
label: "Disabled",
31+
component: "input-text-disabled",
32+
},
33+
];
34+
}
35+
36+
async getHtml() {
37+
return fetch("app/views/InputText/InputText.html").then((data) => {
38+
return data.text();
39+
});
40+
}
41+
}

0 commit comments

Comments
 (0)