@affinda/wc 0.0.1 → 0.0.2
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.
- package/dist/affinda/af-aspect-ratio.entry.esm.js.map +1 -0
- package/dist/affinda/af-color-swatch.entry.esm.js.map +1 -0
- package/dist/affinda/af-container.entry.esm.js.map +1 -0
- package/dist/affinda/af-heading.af-nav-item.af-text.entry.esm.js.map +1 -0
- package/dist/affinda/affinda.esm.js +1 -1
- package/dist/affinda/index.esm.js +1 -1
- package/dist/affinda/index.esm.js.map +1 -1
- package/dist/affinda/p-96c74b41.entry.js +2 -0
- package/dist/affinda/p-96c74b41.entry.js.map +1 -0
- package/dist/affinda/p-DIoXjiux.js +3 -0
- package/dist/affinda/p-DIoXjiux.js.map +1 -0
- package/dist/affinda/p-a6a8ecde.entry.js +2 -0
- package/dist/affinda/p-a6a8ecde.entry.js.map +1 -0
- package/dist/affinda/p-ccdcebe9.entry.js +2 -0
- package/dist/affinda/p-ccdcebe9.entry.js.map +1 -0
- package/dist/affinda/p-f79068a7.entry.js +2 -0
- package/dist/affinda/p-f79068a7.entry.js.map +1 -0
- package/dist/cjs/af-aspect-ratio.cjs.entry.js +83 -0
- package/dist/cjs/af-aspect-ratio.entry.cjs.js.map +1 -0
- package/dist/cjs/af-color-swatch.cjs.entry.js +23 -0
- package/dist/cjs/af-color-swatch.entry.cjs.js.map +1 -0
- package/dist/cjs/af-container.cjs.entry.js +26 -0
- package/dist/cjs/af-container.entry.cjs.js.map +1 -0
- package/dist/cjs/af-heading.af-nav-item.af-text.entry.cjs.js.map +1 -0
- package/dist/cjs/af-heading_3.cjs.entry.js +102 -0
- package/dist/cjs/affinda.cjs.js +2 -2
- package/dist/cjs/{index-5BGpYleS.js → index-DHjsui2n.js} +60 -57
- package/dist/cjs/index-DHjsui2n.js.map +1 -0
- package/dist/cjs/index.cjs.js +11 -133
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/collection/assets/icons/account-01.svg +3 -0
- package/dist/collection/assets/icons/account-02.svg +3 -0
- package/dist/collection/assets/icons/accounts-payable.svg +3 -0
- package/dist/collection/assets/icons/arrow-down.svg +3 -0
- package/dist/collection/assets/icons/arrow-left.svg +3 -0
- package/dist/collection/assets/icons/arrow-right.svg +3 -0
- package/dist/collection/assets/icons/arrow-up.svg +3 -0
- package/dist/collection/assets/icons/bpo.svg +3 -0
- package/dist/collection/assets/icons/chats.svg +3 -0
- package/dist/collection/assets/icons/check-circle.svg +3 -0
- package/dist/collection/assets/icons/check.svg +3 -0
- package/dist/collection/assets/icons/chevron-down.svg +3 -0
- package/dist/collection/assets/icons/chevron-left.svg +3 -0
- package/dist/collection/assets/icons/chevron-right.svg +3 -0
- package/dist/collection/assets/icons/chevron-up.svg +3 -0
- package/dist/collection/assets/icons/close.svg +3 -0
- package/dist/collection/assets/icons/code.svg +3 -0
- package/dist/collection/assets/icons/data.svg +3 -0
- package/dist/collection/assets/icons/document-upload.svg +3 -0
- package/dist/collection/assets/icons/download.svg +3 -0
- package/dist/collection/assets/icons/edit.svg +3 -0
- package/dist/collection/assets/icons/email.svg +3 -0
- package/dist/collection/assets/icons/eye.svg +3 -0
- package/dist/collection/assets/icons/facebook.svg +3 -0
- package/dist/collection/assets/icons/gear.svg +3 -0
- package/dist/collection/assets/icons/github.svg +3 -0
- package/dist/collection/assets/icons/heart.svg +3 -0
- package/dist/collection/assets/icons/home.svg +3 -0
- package/dist/collection/assets/icons/info.svg +3 -0
- package/dist/collection/assets/icons/insurance.svg +3 -0
- package/dist/collection/assets/icons/lending-01.svg +3 -0
- package/dist/collection/assets/icons/lending-02.svg +3 -0
- package/dist/collection/assets/icons/link-out.svg +3 -0
- package/dist/collection/assets/icons/linkedin.svg +3 -0
- package/dist/collection/assets/icons/map-pin.svg +3 -0
- package/dist/collection/assets/icons/menu.svg +3 -0
- package/dist/collection/assets/icons/minus.svg +3 -0
- package/dist/collection/assets/icons/numbers.svg +16 -0
- package/dist/collection/assets/icons/pause.svg +3 -0
- package/dist/collection/assets/icons/play.svg +3 -0
- package/dist/collection/assets/icons/plus.svg +3 -0
- package/dist/collection/assets/icons/productivity.svg +3 -0
- package/dist/collection/assets/icons/quote.svg +3 -0
- package/dist/collection/assets/icons/recruitment.svg +3 -0
- package/dist/collection/assets/icons/refresh.svg +3 -0
- package/dist/collection/assets/icons/search.svg +3 -0
- package/dist/collection/assets/icons/security-01.svg +3 -0
- package/dist/collection/assets/icons/security-02.svg +3 -0
- package/dist/collection/assets/icons/solutions.svg +3 -0
- package/dist/collection/assets/icons/support.svg +3 -0
- package/dist/collection/assets/icons/system.svg +3 -0
- package/dist/collection/assets/icons/time.svg +3 -0
- package/dist/collection/assets/icons/verification-01.svg +3 -0
- package/dist/collection/assets/icons/wand.svg +3 -0
- package/dist/collection/assets/icons/x.svg +3 -0
- package/dist/collection/assets/icons/youtube.svg +3 -0
- package/dist/collection/assets/illustrations/accuracy-inkwell.svg +101 -0
- package/dist/collection/assets/illustrations/accuracy-mist-green.svg +101 -0
- package/dist/collection/assets/illustrations/accuracy-soft-clay.svg +101 -0
- package/dist/collection/assets/illustrations/accuracy-white-ivory.svg +101 -0
- package/dist/collection/assets/illustrations/automate-inkwell.svg +149 -0
- package/dist/collection/assets/illustrations/automate-mist-green.svg +149 -0
- package/dist/collection/assets/illustrations/automate-soft-clay.svg +149 -0
- package/dist/collection/assets/illustrations/automate-white-ivory.svg +149 -0
- package/dist/collection/assets/illustrations/document-raise-inkwell.svg +131 -0
- package/dist/collection/assets/illustrations/document-raise-mist-green.svg +131 -0
- package/dist/collection/assets/illustrations/document-raise-soft-clay.svg +131 -0
- package/dist/collection/assets/illustrations/document-raise-white-ivory.svg +131 -0
- package/dist/collection/assets/illustrations/document-type-inkwell.svg +150 -0
- package/dist/collection/assets/illustrations/document-type-mist-green.svg +150 -0
- package/dist/collection/assets/illustrations/document-type-soft-clay.svg +150 -0
- package/dist/collection/assets/illustrations/document-type-white-ivory.svg +150 -0
- package/dist/collection/assets/illustrations/grow-business-inkwell.svg +116 -0
- package/dist/collection/assets/illustrations/grow-business-mist-green.svg +129 -0
- package/dist/collection/assets/illustrations/grow-business-soft-clay.svg +129 -0
- package/dist/collection/assets/illustrations/grow-business-white-ivory.svg +129 -0
- package/dist/collection/assets/illustrations/industries-inkwell.svg +30 -0
- package/dist/collection/assets/illustrations/industries-mist-green.svg +30 -0
- package/dist/collection/assets/illustrations/industries-soft-clay.svg +30 -0
- package/dist/collection/assets/illustrations/industries-white-ivory.svg +41 -0
- package/dist/collection/assets/illustrations/intelligence-inkwell.svg +65 -0
- package/dist/collection/assets/illustrations/intelligence-mist-green.svg +65 -0
- package/dist/collection/assets/illustrations/intelligence-soft-clay.svg +65 -0
- package/dist/collection/assets/illustrations/intelligence-white-ivory.svg +65 -0
- package/dist/collection/assets/illustrations/page-turn-inkwell.svg +125 -0
- package/dist/collection/assets/illustrations/page-turn-mist-green.svg +125 -0
- package/dist/collection/assets/illustrations/page-turn-soft-clay.svg +125 -0
- package/dist/collection/assets/illustrations/page-turn-white-ivory.svg +125 -0
- package/dist/collection/assets/illustrations/shapes-inkwell.svg +65 -0
- package/dist/collection/assets/illustrations/shapes-mist-green.svg +65 -0
- package/dist/collection/assets/illustrations/shapes-soft-clay.svg +65 -0
- package/dist/collection/assets/illustrations/shapes-white-ivory.svg +65 -0
- package/dist/collection/assets/illustrations/team-leader-inkwell.svg +106 -0
- package/dist/collection/assets/illustrations/team-leader-mist-green.svg +106 -0
- package/dist/collection/assets/illustrations/team-leader-soft-clay.svg +106 -0
- package/dist/collection/assets/illustrations/team-leader-white-ivory.svg +106 -0
- package/dist/collection/assets/illustrations/thinking-inkwell.svg +89 -0
- package/dist/collection/assets/illustrations/thinking-mist-green.svg +89 -0
- package/dist/collection/assets/illustrations/thinking-soft-clay.svg +89 -0
- package/dist/collection/assets/illustrations/thinking-white-ivory.svg +89 -0
- package/dist/collection/collection-manifest.json +6 -5
- package/dist/collection/components/af-aspect-ratio/af-aspect-ratio.css +17 -0
- package/dist/collection/components/af-aspect-ratio/af-aspect-ratio.js +117 -0
- package/dist/collection/components/af-aspect-ratio/af-aspect-ratio.js.map +1 -0
- package/dist/collection/components/af-color-swatch/af-color-swatch.css +42 -0
- package/dist/collection/components/af-color-swatch/af-color-swatch.js +88 -0
- package/dist/collection/components/af-color-swatch/af-color-swatch.js.map +1 -0
- package/dist/collection/components/af-container/af-container.css +76 -0
- package/dist/collection/components/af-container/af-container.js +57 -0
- package/dist/collection/components/af-container/af-container.js.map +1 -0
- package/dist/collection/components/af-heading/af-heading.css +99 -0
- package/dist/collection/components/af-heading/af-heading.js +86 -0
- package/dist/collection/components/af-heading/af-heading.js.map +1 -0
- package/dist/collection/components/af-nav-item/af-nav-item.css +135 -0
- package/dist/collection/components/af-nav-item/af-nav-item.js +134 -0
- package/dist/collection/components/af-nav-item/af-nav-item.js.map +1 -0
- package/dist/collection/components/af-text/af-text.css +61 -0
- package/dist/collection/components/af-text/af-text.js +96 -0
- package/dist/collection/components/af-text/af-text.js.map +1 -0
- package/dist/collection/components.js +6 -5
- package/dist/collection/components.js.map +1 -1
- package/dist/components/{af-icon-button.d.ts → af-aspect-ratio.d.ts} +4 -4
- package/dist/components/af-aspect-ratio.js +9 -0
- package/dist/components/af-aspect-ratio.js.map +1 -0
- package/dist/components/af-color-swatch.d.ts +11 -0
- package/dist/components/af-color-swatch.js +9 -0
- package/dist/components/af-color-swatch.js.map +1 -0
- package/dist/components/{af-input.d.ts → af-container.d.ts} +4 -4
- package/dist/components/af-container.js +9 -0
- package/dist/components/af-container.js.map +1 -0
- package/dist/components/{af-button.d.ts → af-heading.d.ts} +4 -4
- package/dist/components/af-heading.js +9 -0
- package/dist/components/af-heading.js.map +1 -0
- package/dist/components/{af-badge.d.ts → af-nav-item.d.ts} +4 -4
- package/dist/components/af-nav-item.js +9 -0
- package/dist/components/af-nav-item.js.map +1 -0
- package/dist/components/{af-card.d.ts → af-text.d.ts} +4 -4
- package/dist/components/af-text.js +9 -0
- package/dist/components/af-text.js.map +1 -0
- package/dist/components/index.js +7 -6
- package/dist/components/index.js.map +1 -1
- package/dist/components/p-BZ5_l5Q-.js +50 -0
- package/dist/components/p-BZ5_l5Q-.js.map +1 -0
- package/dist/components/p-CCPh8sLt.js +102 -0
- package/dist/components/p-CCPh8sLt.js.map +1 -0
- package/dist/components/p-CbKdmUDd.js +59 -0
- package/dist/components/p-CbKdmUDd.js.map +1 -0
- package/dist/components/p-Ck_3oNdO.js +44 -0
- package/dist/components/p-Ck_3oNdO.js.map +1 -0
- package/dist/components/p-DbZX-luM.js +45 -0
- package/dist/components/p-DbZX-luM.js.map +1 -0
- package/dist/components/p-Ntwn3krC.js +66 -0
- package/dist/components/p-Ntwn3krC.js.map +1 -0
- package/dist/components/{p-DOtgsZRB.js → p-TaHgCKVa.js} +60 -61
- package/dist/components/p-TaHgCKVa.js.map +1 -0
- package/dist/esm/af-aspect-ratio.entry.js +81 -0
- package/dist/esm/af-aspect-ratio.entry.js.map +1 -0
- package/dist/esm/af-color-swatch.entry.js +21 -0
- package/dist/esm/af-color-swatch.entry.js.map +1 -0
- package/dist/esm/af-container.entry.js +24 -0
- package/dist/esm/af-container.entry.js.map +1 -0
- package/dist/esm/af-heading.af-nav-item.af-text.entry.js.map +1 -0
- package/dist/esm/af-heading_3.entry.js +98 -0
- package/dist/esm/affinda.js +3 -3
- package/dist/esm/{index-o0tfWqnY.js → index-DIoXjiux.js} +60 -57
- package/dist/esm/index-DIoXjiux.js.map +1 -0
- package/dist/esm/index.js +5 -132
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/loader.js +3 -3
- package/dist/types/components/af-aspect-ratio/af-aspect-ratio.d.ts +18 -0
- package/dist/types/components/af-color-swatch/af-color-swatch.d.ts +9 -0
- package/dist/types/components/af-container/af-container.d.ts +15 -0
- package/dist/types/components/af-heading/af-heading.d.ts +8 -0
- package/dist/types/components/af-nav-item/af-nav-item.d.ts +27 -0
- package/dist/types/components/af-text/af-text.d.ts +9 -0
- package/dist/types/components.d.ts +183 -208
- package/package.json +1 -1
- package/dist/affinda/af-badge.af-button.af-card.af-icon-button.af-input.entry.esm.js.map +0 -1
- package/dist/affinda/p-bca10492.entry.js +0 -2
- package/dist/affinda/p-bca10492.entry.js.map +0 -1
- package/dist/affinda/p-o0tfWqnY.js +0 -3
- package/dist/affinda/p-o0tfWqnY.js.map +0 -1
- package/dist/cjs/af-badge.af-button.af-card.af-icon-button.af-input.entry.cjs.js.map +0 -1
- package/dist/cjs/af-badge_5.cjs.entry.js +0 -13
- package/dist/cjs/index-5BGpYleS.js.map +0 -1
- package/dist/collection/components/af-badge/af-badge.css +0 -29
- package/dist/collection/components/af-badge/af-badge.js +0 -47
- package/dist/collection/components/af-badge/af-badge.js.map +0 -1
- package/dist/collection/components/af-button/af-button.css +0 -74
- package/dist/collection/components/af-button/af-button.js +0 -149
- package/dist/collection/components/af-button/af-button.js.map +0 -1
- package/dist/collection/components/af-card/af-card.css +0 -69
- package/dist/collection/components/af-card/af-card.js +0 -70
- package/dist/collection/components/af-card/af-card.js.map +0 -1
- package/dist/collection/components/af-icon-button/af-icon-button.css +0 -70
- package/dist/collection/components/af-icon-button/af-icon-button.js +0 -145
- package/dist/collection/components/af-icon-button/af-icon-button.js.map +0 -1
- package/dist/collection/components/af-input/af-input.css +0 -57
- package/dist/collection/components/af-input/af-input.js +0 -193
- package/dist/collection/components/af-input/af-input.js.map +0 -1
- package/dist/components/af-badge.js +0 -9
- package/dist/components/af-badge.js.map +0 -1
- package/dist/components/af-button.js +0 -9
- package/dist/components/af-button.js.map +0 -1
- package/dist/components/af-card.js +0 -9
- package/dist/components/af-card.js.map +0 -1
- package/dist/components/af-icon-button.js +0 -9
- package/dist/components/af-icon-button.js.map +0 -1
- package/dist/components/af-input.js +0 -9
- package/dist/components/af-input.js.map +0 -1
- package/dist/components/p-B7I93sz2.js +0 -39
- package/dist/components/p-B7I93sz2.js.map +0 -1
- package/dist/components/p-CZd1ieht.js +0 -62
- package/dist/components/p-CZd1ieht.js.map +0 -1
- package/dist/components/p-D6PwARU0.js +0 -59
- package/dist/components/p-D6PwARU0.js.map +0 -1
- package/dist/components/p-DOtgsZRB.js.map +0 -1
- package/dist/components/p-DZIXhvI0.js +0 -44
- package/dist/components/p-DZIXhvI0.js.map +0 -1
- package/dist/components/p-zIKPa48S.js +0 -62
- package/dist/components/p-zIKPa48S.js.map +0 -1
- package/dist/esm/af-badge.af-button.af-card.af-icon-button.af-input.entry.js.map +0 -1
- package/dist/esm/af-badge_5.entry.js +0 -3
- package/dist/esm/index-o0tfWqnY.js.map +0 -1
- package/dist/types/components/af-badge/af-badge.d.ts +0 -5
- package/dist/types/components/af-button/af-button.d.ts +0 -15
- package/dist/types/components/af-card/af-card.d.ts +0 -7
- package/dist/types/components/af-icon-button/af-icon-button.d.ts +0 -15
- package/dist/types/components/af-input/af-input.d.ts +0 -24
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
:host {
|
|
2
|
-
display: block;
|
|
3
|
-
font-family: var(--af-font-family-sans);
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
label {
|
|
7
|
-
display: grid;
|
|
8
|
-
gap: var(--af-space-2);
|
|
9
|
-
color: var(--af-color-fg-default);
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
.label {
|
|
13
|
-
font-size: 0.95rem;
|
|
14
|
-
font-weight: var(--af-font-weight-semibold);
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
.control {
|
|
18
|
-
position: relative;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
input {
|
|
22
|
-
width: 100%;
|
|
23
|
-
padding: calc(var(--af-space-2) + 2px) calc(var(--af-space-4) + 8px);
|
|
24
|
-
border-radius: var(--af-radius-md);
|
|
25
|
-
border: 1px solid rgba(18, 15, 31, 0.18);
|
|
26
|
-
background: rgba(255, 255, 255, 0.9);
|
|
27
|
-
color: inherit;
|
|
28
|
-
font: inherit;
|
|
29
|
-
transition: border-color 160ms ease, box-shadow 160ms ease;
|
|
30
|
-
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
input::placeholder {
|
|
34
|
-
color: var(--af-color-fg-muted);
|
|
35
|
-
opacity: 0.8;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
input:focus-visible {
|
|
39
|
-
outline: none;
|
|
40
|
-
border-color: var(--af-color-brand-primary-500);
|
|
41
|
-
box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.18);
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
label.disabled {
|
|
45
|
-
opacity: 0.55;
|
|
46
|
-
cursor: not-allowed;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
input:disabled {
|
|
50
|
-
background: rgba(241, 240, 247, 0.7);
|
|
51
|
-
cursor: not-allowed;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
.description {
|
|
55
|
-
font-size: 0.825rem;
|
|
56
|
-
color: var(--af-color-fg-muted);
|
|
57
|
-
}
|
|
@@ -1,193 +0,0 @@
|
|
|
1
|
-
import { h } from "@stencil/core";
|
|
2
|
-
let inputIds = 0;
|
|
3
|
-
export class AfInput {
|
|
4
|
-
constructor() {
|
|
5
|
-
this.inputId = `af-input-${++inputIds}`;
|
|
6
|
-
this.descriptionId = `${this.inputId}-desc`;
|
|
7
|
-
/** Input type attribute */
|
|
8
|
-
this.type = 'text';
|
|
9
|
-
/** Current value (mutable so the component stays in sync) */
|
|
10
|
-
this.value = '';
|
|
11
|
-
/** Disabled state */
|
|
12
|
-
this.disabled = false;
|
|
13
|
-
this.handleInput = (event) => {
|
|
14
|
-
const target = event.target;
|
|
15
|
-
this.value = target.value;
|
|
16
|
-
this.afInput.emit(this.value);
|
|
17
|
-
};
|
|
18
|
-
this.handleChange = () => {
|
|
19
|
-
this.afChange.emit(this.value);
|
|
20
|
-
};
|
|
21
|
-
}
|
|
22
|
-
render() {
|
|
23
|
-
const describedBy = this.description ? this.descriptionId : undefined;
|
|
24
|
-
return (h("label", { key: 'd14267dee125c07311c07bc31f0151448095dba6', part: "label", class: { disabled: this.disabled }, htmlFor: this.inputId }, this.label ? (h("span", { class: "label", part: "label-text" }, this.label)) : null, h("div", { key: 'd3b6428100e25c981650f5faa23df549d587ac10', class: "control" }, h("input", { key: '9e26981c32775b79ce9c3458a4890968fab04ef6', part: "field", id: this.inputId, type: this.type, placeholder: this.placeholder, value: this.value, disabled: this.disabled, "aria-describedby": describedBy, onInput: this.handleInput, onChange: this.handleChange })), this.description ? (h("p", { id: this.descriptionId, class: "description", part: "description" }, this.description)) : null));
|
|
25
|
-
}
|
|
26
|
-
static get is() { return "af-input"; }
|
|
27
|
-
static get encapsulation() { return "shadow"; }
|
|
28
|
-
static get originalStyleUrls() {
|
|
29
|
-
return {
|
|
30
|
-
"$": ["af-input.css"]
|
|
31
|
-
};
|
|
32
|
-
}
|
|
33
|
-
static get styleUrls() {
|
|
34
|
-
return {
|
|
35
|
-
"$": ["af-input.css"]
|
|
36
|
-
};
|
|
37
|
-
}
|
|
38
|
-
static get properties() {
|
|
39
|
-
return {
|
|
40
|
-
"label": {
|
|
41
|
-
"type": "string",
|
|
42
|
-
"mutable": false,
|
|
43
|
-
"complexType": {
|
|
44
|
-
"original": "string",
|
|
45
|
-
"resolved": "string | undefined",
|
|
46
|
-
"references": {}
|
|
47
|
-
},
|
|
48
|
-
"required": false,
|
|
49
|
-
"optional": true,
|
|
50
|
-
"docs": {
|
|
51
|
-
"tags": [],
|
|
52
|
-
"text": "Optional label text"
|
|
53
|
-
},
|
|
54
|
-
"getter": false,
|
|
55
|
-
"setter": false,
|
|
56
|
-
"reflect": false,
|
|
57
|
-
"attribute": "label"
|
|
58
|
-
},
|
|
59
|
-
"description": {
|
|
60
|
-
"type": "string",
|
|
61
|
-
"mutable": false,
|
|
62
|
-
"complexType": {
|
|
63
|
-
"original": "string",
|
|
64
|
-
"resolved": "string | undefined",
|
|
65
|
-
"references": {}
|
|
66
|
-
},
|
|
67
|
-
"required": false,
|
|
68
|
-
"optional": true,
|
|
69
|
-
"docs": {
|
|
70
|
-
"tags": [],
|
|
71
|
-
"text": "Assistive description shown below the field"
|
|
72
|
-
},
|
|
73
|
-
"getter": false,
|
|
74
|
-
"setter": false,
|
|
75
|
-
"reflect": false,
|
|
76
|
-
"attribute": "description"
|
|
77
|
-
},
|
|
78
|
-
"type": {
|
|
79
|
-
"type": "string",
|
|
80
|
-
"mutable": false,
|
|
81
|
-
"complexType": {
|
|
82
|
-
"original": "'text' | 'email' | 'password' | 'search'",
|
|
83
|
-
"resolved": "\"email\" | \"password\" | \"search\" | \"text\"",
|
|
84
|
-
"references": {}
|
|
85
|
-
},
|
|
86
|
-
"required": false,
|
|
87
|
-
"optional": false,
|
|
88
|
-
"docs": {
|
|
89
|
-
"tags": [],
|
|
90
|
-
"text": "Input type attribute"
|
|
91
|
-
},
|
|
92
|
-
"getter": false,
|
|
93
|
-
"setter": false,
|
|
94
|
-
"reflect": false,
|
|
95
|
-
"attribute": "type",
|
|
96
|
-
"defaultValue": "'text'"
|
|
97
|
-
},
|
|
98
|
-
"placeholder": {
|
|
99
|
-
"type": "string",
|
|
100
|
-
"mutable": false,
|
|
101
|
-
"complexType": {
|
|
102
|
-
"original": "string",
|
|
103
|
-
"resolved": "string | undefined",
|
|
104
|
-
"references": {}
|
|
105
|
-
},
|
|
106
|
-
"required": false,
|
|
107
|
-
"optional": true,
|
|
108
|
-
"docs": {
|
|
109
|
-
"tags": [],
|
|
110
|
-
"text": "Placeholder text"
|
|
111
|
-
},
|
|
112
|
-
"getter": false,
|
|
113
|
-
"setter": false,
|
|
114
|
-
"reflect": false,
|
|
115
|
-
"attribute": "placeholder"
|
|
116
|
-
},
|
|
117
|
-
"value": {
|
|
118
|
-
"type": "string",
|
|
119
|
-
"mutable": true,
|
|
120
|
-
"complexType": {
|
|
121
|
-
"original": "string",
|
|
122
|
-
"resolved": "string",
|
|
123
|
-
"references": {}
|
|
124
|
-
},
|
|
125
|
-
"required": false,
|
|
126
|
-
"optional": false,
|
|
127
|
-
"docs": {
|
|
128
|
-
"tags": [],
|
|
129
|
-
"text": "Current value (mutable so the component stays in sync)"
|
|
130
|
-
},
|
|
131
|
-
"getter": false,
|
|
132
|
-
"setter": false,
|
|
133
|
-
"reflect": false,
|
|
134
|
-
"attribute": "value",
|
|
135
|
-
"defaultValue": "''"
|
|
136
|
-
},
|
|
137
|
-
"disabled": {
|
|
138
|
-
"type": "boolean",
|
|
139
|
-
"mutable": false,
|
|
140
|
-
"complexType": {
|
|
141
|
-
"original": "boolean",
|
|
142
|
-
"resolved": "boolean",
|
|
143
|
-
"references": {}
|
|
144
|
-
},
|
|
145
|
-
"required": false,
|
|
146
|
-
"optional": false,
|
|
147
|
-
"docs": {
|
|
148
|
-
"tags": [],
|
|
149
|
-
"text": "Disabled state"
|
|
150
|
-
},
|
|
151
|
-
"getter": false,
|
|
152
|
-
"setter": false,
|
|
153
|
-
"reflect": true,
|
|
154
|
-
"attribute": "disabled",
|
|
155
|
-
"defaultValue": "false"
|
|
156
|
-
}
|
|
157
|
-
};
|
|
158
|
-
}
|
|
159
|
-
static get events() {
|
|
160
|
-
return [{
|
|
161
|
-
"method": "afInput",
|
|
162
|
-
"name": "afInput",
|
|
163
|
-
"bubbles": true,
|
|
164
|
-
"cancelable": true,
|
|
165
|
-
"composed": true,
|
|
166
|
-
"docs": {
|
|
167
|
-
"tags": [],
|
|
168
|
-
"text": "Fired as the user types"
|
|
169
|
-
},
|
|
170
|
-
"complexType": {
|
|
171
|
-
"original": "string",
|
|
172
|
-
"resolved": "string",
|
|
173
|
-
"references": {}
|
|
174
|
-
}
|
|
175
|
-
}, {
|
|
176
|
-
"method": "afChange",
|
|
177
|
-
"name": "afChange",
|
|
178
|
-
"bubbles": true,
|
|
179
|
-
"cancelable": true,
|
|
180
|
-
"composed": true,
|
|
181
|
-
"docs": {
|
|
182
|
-
"tags": [],
|
|
183
|
-
"text": "Fired when the field loses focus after a change"
|
|
184
|
-
},
|
|
185
|
-
"complexType": {
|
|
186
|
-
"original": "string",
|
|
187
|
-
"resolved": "string",
|
|
188
|
-
"references": {}
|
|
189
|
-
}
|
|
190
|
-
}];
|
|
191
|
-
}
|
|
192
|
-
}
|
|
193
|
-
//# sourceMappingURL=af-input.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"af-input.js","sourceRoot":"","sources":["../../../src/components/af-input/af-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAExE,IAAI,QAAQ,GAAG,CAAC,CAAC;AAOjB,MAAM,OAAO,OAAO;IALpB;QAMU,YAAO,GAAG,YAAY,EAAE,QAAQ,EAAE,CAAC;QACnC,kBAAa,GAAG,GAAG,IAAI,CAAC,OAAO,OAAO,CAAC;QAQ/C,2BAA2B;QACnB,SAAI,GAA6C,MAAM,CAAC;QAKhE,6DAA6D;QACpC,UAAK,GAAG,EAAE,CAAC;QAEpC,qBAAqB;QACI,aAAQ,GAAG,KAAK,CAAC;QAQlC,gBAAW,GAAG,CAAC,KAAY,EAAE,EAAE;YACrC,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;YAChD,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;YAC1B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAChC,CAAC,CAAC;QAEM,iBAAY,GAAG,GAAG,EAAE;YAC1B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACjC,CAAC,CAAC;KAiCH;IA/BC,MAAM;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC;QAEtE,OAAO,CACL,8DAAO,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO;YAC1E,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACZ,YAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,YAAY,IAClC,IAAI,CAAC,KAAK,CACN,CACR,CAAC,CAAC,CAAC,IAAI;YACR,4DAAK,KAAK,EAAC,SAAS;gBAClB,8DACE,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,sBACL,WAAW,EAC7B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,YAAY,GAC3B,CACE;YACL,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAClB,SAAG,EAAE,EAAE,IAAI,CAAC,aAAa,EAAE,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,aAAa,IAC9D,IAAI,CAAC,WAAW,CACf,CACL,CAAC,CAAC,CAAC,IAAI,CACF,CACT,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\n\nlet inputIds = 0;\n\n@Component({\n tag: 'af-input',\n styleUrl: 'af-input.css',\n shadow: true\n})\nexport class AfInput {\n private inputId = `af-input-${++inputIds}`;\n private descriptionId = `${this.inputId}-desc`;\n\n /** Optional label text */\n @Prop() label?: string;\n\n /** Assistive description shown below the field */\n @Prop() description?: string;\n\n /** Input type attribute */\n @Prop() type: 'text' | 'email' | 'password' | 'search' = 'text';\n\n /** Placeholder text */\n @Prop() placeholder?: string;\n\n /** Current value (mutable so the component stays in sync) */\n @Prop({ mutable: true }) value = '';\n\n /** Disabled state */\n @Prop({ reflect: true }) disabled = false;\n\n /** Fired as the user types */\n @Event() afInput!: EventEmitter<string>;\n\n /** Fired when the field loses focus after a change */\n @Event() afChange!: EventEmitter<string>;\n\n private handleInput = (event: Event) => {\n const target = event.target as HTMLInputElement;\n this.value = target.value;\n this.afInput.emit(this.value);\n };\n\n private handleChange = () => {\n this.afChange.emit(this.value);\n };\n\n render() {\n const describedBy = this.description ? this.descriptionId : undefined;\n\n return (\n <label part=\"label\" class={{ disabled: this.disabled }} htmlFor={this.inputId}>\n {this.label ? (\n <span class=\"label\" part=\"label-text\">\n {this.label}\n </span>\n ) : null}\n <div class=\"control\">\n <input\n part=\"field\"\n id={this.inputId}\n type={this.type}\n placeholder={this.placeholder}\n value={this.value}\n disabled={this.disabled}\n aria-describedby={describedBy}\n onInput={this.handleInput}\n onChange={this.handleChange}\n />\n </div>\n {this.description ? (\n <p id={this.descriptionId} class=\"description\" part=\"description\">\n {this.description}\n </p>\n ) : null}\n </label>\n );\n }\n}\n"]}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { A as AfBadge$1, d as defineCustomElement$1 } from './p-B7I93sz2.js';
|
|
2
|
-
|
|
3
|
-
const AfBadge = AfBadge$1;
|
|
4
|
-
const defineCustomElement = defineCustomElement$1;
|
|
5
|
-
|
|
6
|
-
export { AfBadge, defineCustomElement };
|
|
7
|
-
//# sourceMappingURL=af-badge.js.map
|
|
8
|
-
|
|
9
|
-
//# sourceMappingURL=af-badge.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"af-badge.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { A as AfButton$1, d as defineCustomElement$1 } from './p-zIKPa48S.js';
|
|
2
|
-
|
|
3
|
-
const AfButton = AfButton$1;
|
|
4
|
-
const defineCustomElement = defineCustomElement$1;
|
|
5
|
-
|
|
6
|
-
export { AfButton, defineCustomElement };
|
|
7
|
-
//# sourceMappingURL=af-button.js.map
|
|
8
|
-
|
|
9
|
-
//# sourceMappingURL=af-button.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"af-button.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { A as AfCard$1, d as defineCustomElement$1 } from './p-DZIXhvI0.js';
|
|
2
|
-
|
|
3
|
-
const AfCard = AfCard$1;
|
|
4
|
-
const defineCustomElement = defineCustomElement$1;
|
|
5
|
-
|
|
6
|
-
export { AfCard, defineCustomElement };
|
|
7
|
-
//# sourceMappingURL=af-card.js.map
|
|
8
|
-
|
|
9
|
-
//# sourceMappingURL=af-card.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"af-card.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { A as AfIconButton$1, d as defineCustomElement$1 } from './p-D6PwARU0.js';
|
|
2
|
-
|
|
3
|
-
const AfIconButton = AfIconButton$1;
|
|
4
|
-
const defineCustomElement = defineCustomElement$1;
|
|
5
|
-
|
|
6
|
-
export { AfIconButton, defineCustomElement };
|
|
7
|
-
//# sourceMappingURL=af-icon-button.js.map
|
|
8
|
-
|
|
9
|
-
//# sourceMappingURL=af-icon-button.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"af-icon-button.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { A as AfInput$1, d as defineCustomElement$1 } from './p-CZd1ieht.js';
|
|
2
|
-
|
|
3
|
-
const AfInput = AfInput$1;
|
|
4
|
-
const defineCustomElement = defineCustomElement$1;
|
|
5
|
-
|
|
6
|
-
export { AfInput, defineCustomElement };
|
|
7
|
-
//# sourceMappingURL=af-input.js.map
|
|
8
|
-
|
|
9
|
-
//# sourceMappingURL=af-input.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"af-input.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import { p as proxyCustomElement, H, h } from './p-DOtgsZRB.js';
|
|
2
|
-
|
|
3
|
-
const afBadgeCss = ":host{display:inline-block}span{display:inline-flex;align-items:center;justify-content:center;padding:2px var(--af-space-2);border-radius:var(--af-radius-pill);font:var(--af-font-weight-semibold) var(--af-size-font-sm) / 1 var(--af-font-family-sans);letter-spacing:0.02em;text-transform:uppercase}span.tone-brand{background:rgba(124, 58, 237, 0.12);color:var(--af-color-brand-primary-500)}span.tone-neutral{background:rgba(18, 15, 31, 0.1);color:var(--af-color-fg-default)}span.tone-success{background:rgba(16, 185, 129, 0.12);color:#0f766e}";
|
|
4
|
-
|
|
5
|
-
const AfBadge = /*@__PURE__*/ proxyCustomElement(class AfBadge extends H {
|
|
6
|
-
constructor(registerHost) {
|
|
7
|
-
super();
|
|
8
|
-
if (registerHost !== false) {
|
|
9
|
-
this.__registerHost();
|
|
10
|
-
}
|
|
11
|
-
this.__attachShadow();
|
|
12
|
-
/** Color theme of the badge */
|
|
13
|
-
this.tone = 'brand';
|
|
14
|
-
}
|
|
15
|
-
render() {
|
|
16
|
-
return (h("span", { key: '1f9d4015b429e012eade75e331c991d5c785482d', class: `tone-${this.tone}`, part: "base" }, h("slot", { key: 'b69b37a3e996c43cb16d04d829232d9539f45e06' })));
|
|
17
|
-
}
|
|
18
|
-
static get style() { return afBadgeCss; }
|
|
19
|
-
}, [257, "af-badge", {
|
|
20
|
-
"tone": [1]
|
|
21
|
-
}]);
|
|
22
|
-
function defineCustomElement() {
|
|
23
|
-
if (typeof customElements === "undefined") {
|
|
24
|
-
return;
|
|
25
|
-
}
|
|
26
|
-
const components = ["af-badge"];
|
|
27
|
-
components.forEach(tagName => { switch (tagName) {
|
|
28
|
-
case "af-badge":
|
|
29
|
-
if (!customElements.get(tagName)) {
|
|
30
|
-
customElements.define(tagName, AfBadge);
|
|
31
|
-
}
|
|
32
|
-
break;
|
|
33
|
-
} });
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
export { AfBadge as A, defineCustomElement as d };
|
|
37
|
-
//# sourceMappingURL=p-B7I93sz2.js.map
|
|
38
|
-
|
|
39
|
-
//# sourceMappingURL=p-B7I93sz2.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"p-B7I93sz2.js","mappings":";;AAAA,MAAM,UAAU,GAAG,+hBAA+hB;;MCOriB,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;AALpB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAOU,QAAA,IAAI,CAAA,IAAA,GAAoC,OAAO;AASxD;IAPC,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,CAAQ,KAAA,EAAA,IAAI,CAAC,IAAI,CAAA,CAAE,EAAE,IAAI,EAAC,MAAM,EAAA,EAC3C,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACH;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-badge/af-badge.css?tag=af-badge&encapsulation=shadow","src/components/af-badge/af-badge.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\nspan {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 2px var(--af-space-2);\n border-radius: var(--af-radius-pill);\n font: var(--af-font-weight-semibold) var(--af-size-font-sm) / 1 var(--af-font-family-sans);\n letter-spacing: 0.02em;\n text-transform: uppercase;\n}\n\nspan.tone-brand {\n background: rgba(124, 58, 237, 0.12);\n color: var(--af-color-brand-primary-500);\n}\n\nspan.tone-neutral {\n background: rgba(18, 15, 31, 0.1);\n color: var(--af-color-fg-default);\n}\n\nspan.tone-success {\n background: rgba(16, 185, 129, 0.12);\n color: #0f766e;\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'af-badge',\n styleUrl: 'af-badge.css',\n shadow: true\n})\nexport class AfBadge {\n /** Color theme of the badge */\n @Prop() tone: 'brand' | 'neutral' | 'success' = 'brand';\n\n render() {\n return (\n <span class={`tone-${this.tone}`} part=\"base\">\n <slot />\n </span>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
import { p as proxyCustomElement, H, c as createEvent, h } from './p-DOtgsZRB.js';
|
|
2
|
-
|
|
3
|
-
const afInputCss = ":host{display:block;font-family:var(--af-font-family-sans)}label{display:grid;gap:var(--af-space-2);color:var(--af-color-fg-default)}.label{font-size:0.95rem;font-weight:var(--af-font-weight-semibold)}.control{position:relative}input{width:100%;padding:calc(var(--af-space-2) + 2px) calc(var(--af-space-4) + 8px);border-radius:var(--af-radius-md);border:1px solid rgba(18, 15, 31, 0.18);background:rgba(255, 255, 255, 0.9);color:inherit;font:inherit;transition:border-color 160ms ease, box-shadow 160ms ease;box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.6)}input::placeholder{color:var(--af-color-fg-muted);opacity:0.8}input:focus-visible{outline:none;border-color:var(--af-color-brand-primary-500);box-shadow:0 0 0 4px rgba(124, 58, 237, 0.18)}label.disabled{opacity:0.55;cursor:not-allowed}input:disabled{background:rgba(241, 240, 247, 0.7);cursor:not-allowed}.description{font-size:0.825rem;color:var(--af-color-fg-muted)}";
|
|
4
|
-
|
|
5
|
-
let inputIds = 0;
|
|
6
|
-
const AfInput = /*@__PURE__*/ proxyCustomElement(class AfInput extends H {
|
|
7
|
-
constructor(registerHost) {
|
|
8
|
-
super();
|
|
9
|
-
if (registerHost !== false) {
|
|
10
|
-
this.__registerHost();
|
|
11
|
-
}
|
|
12
|
-
this.__attachShadow();
|
|
13
|
-
this.afInput = createEvent(this, "afInput");
|
|
14
|
-
this.afChange = createEvent(this, "afChange");
|
|
15
|
-
this.inputId = `af-input-${++inputIds}`;
|
|
16
|
-
this.descriptionId = `${this.inputId}-desc`;
|
|
17
|
-
/** Input type attribute */
|
|
18
|
-
this.type = 'text';
|
|
19
|
-
/** Current value (mutable so the component stays in sync) */
|
|
20
|
-
this.value = '';
|
|
21
|
-
/** Disabled state */
|
|
22
|
-
this.disabled = false;
|
|
23
|
-
this.handleInput = (event) => {
|
|
24
|
-
const target = event.target;
|
|
25
|
-
this.value = target.value;
|
|
26
|
-
this.afInput.emit(this.value);
|
|
27
|
-
};
|
|
28
|
-
this.handleChange = () => {
|
|
29
|
-
this.afChange.emit(this.value);
|
|
30
|
-
};
|
|
31
|
-
}
|
|
32
|
-
render() {
|
|
33
|
-
const describedBy = this.description ? this.descriptionId : undefined;
|
|
34
|
-
return (h("label", { key: 'd14267dee125c07311c07bc31f0151448095dba6', part: "label", class: { disabled: this.disabled }, htmlFor: this.inputId }, this.label ? (h("span", { class: "label", part: "label-text" }, this.label)) : null, h("div", { key: 'd3b6428100e25c981650f5faa23df549d587ac10', class: "control" }, h("input", { key: '9e26981c32775b79ce9c3458a4890968fab04ef6', part: "field", id: this.inputId, type: this.type, placeholder: this.placeholder, value: this.value, disabled: this.disabled, "aria-describedby": describedBy, onInput: this.handleInput, onChange: this.handleChange })), this.description ? (h("p", { id: this.descriptionId, class: "description", part: "description" }, this.description)) : null));
|
|
35
|
-
}
|
|
36
|
-
static get style() { return afInputCss; }
|
|
37
|
-
}, [257, "af-input", {
|
|
38
|
-
"label": [1],
|
|
39
|
-
"description": [1],
|
|
40
|
-
"type": [1],
|
|
41
|
-
"placeholder": [1],
|
|
42
|
-
"value": [1025],
|
|
43
|
-
"disabled": [516]
|
|
44
|
-
}]);
|
|
45
|
-
function defineCustomElement() {
|
|
46
|
-
if (typeof customElements === "undefined") {
|
|
47
|
-
return;
|
|
48
|
-
}
|
|
49
|
-
const components = ["af-input"];
|
|
50
|
-
components.forEach(tagName => { switch (tagName) {
|
|
51
|
-
case "af-input":
|
|
52
|
-
if (!customElements.get(tagName)) {
|
|
53
|
-
customElements.define(tagName, AfInput);
|
|
54
|
-
}
|
|
55
|
-
break;
|
|
56
|
-
} });
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
export { AfInput as A, defineCustomElement as d };
|
|
60
|
-
//# sourceMappingURL=p-CZd1ieht.js.map
|
|
61
|
-
|
|
62
|
-
//# sourceMappingURL=p-CZd1ieht.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"p-CZd1ieht.js","mappings":";;AAAA,MAAM,UAAU,GAAG,g6BAAg6B;;ACEn7B,IAAI,QAAQ,GAAG,CAAC;MAOH,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;AALpB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;;AAMU,QAAA,IAAA,CAAA,OAAO,GAAG,YAAY,EAAE,QAAQ,EAAE;QAClC,IAAA,CAAA,aAAa,GAAG,CAAA,EAAG,IAAI,CAAC,OAAO,OAAO;;AAStC,QAAA,IAAI,CAAA,IAAA,GAA6C,MAAM;;AAMtC,QAAA,IAAK,CAAA,KAAA,GAAG,EAAE;;AAGV,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAQjC,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAY,KAAI;AACrC,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B;AAC/C,YAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK;YACzB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;AAC/B,SAAC;AAEO,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;YAC1B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;AAChC,SAAC;AAiCF;IA/BC,MAAM,GAAA;AACJ,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,GAAG,SAAS;AAErE,QAAA,QACE,8DAAO,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAA,EAC1E,IAAI,CAAC,KAAK,IACT,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,YAAY,EAClC,EAAA,IAAI,CAAC,KAAK,CACN,IACL,IAAI,EACR,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EAClB,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACL,kBAAA,EAAA,WAAW,EAC7B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAA,CAC3B,CACE,EACL,IAAI,CAAC,WAAW,IACf,CAAA,CAAA,GAAA,EAAA,EAAG,EAAE,EAAE,IAAI,CAAC,aAAa,EAAE,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,aAAa,EAC9D,EAAA,IAAI,CAAC,WAAW,CACf,IACF,IAAI,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-input/af-input.css?tag=af-input&encapsulation=shadow","src/components/af-input/af-input.tsx"],"sourcesContent":[":host {\n display: block;\n font-family: var(--af-font-family-sans);\n}\n\nlabel {\n display: grid;\n gap: var(--af-space-2);\n color: var(--af-color-fg-default);\n}\n\n.label {\n font-size: 0.95rem;\n font-weight: var(--af-font-weight-semibold);\n}\n\n.control {\n position: relative;\n}\n\ninput {\n width: 100%;\n padding: calc(var(--af-space-2) + 2px) calc(var(--af-space-4) + 8px);\n border-radius: var(--af-radius-md);\n border: 1px solid rgba(18, 15, 31, 0.18);\n background: rgba(255, 255, 255, 0.9);\n color: inherit;\n font: inherit;\n transition: border-color 160ms ease, box-shadow 160ms ease;\n box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);\n}\n\ninput::placeholder {\n color: var(--af-color-fg-muted);\n opacity: 0.8;\n}\n\ninput:focus-visible {\n outline: none;\n border-color: var(--af-color-brand-primary-500);\n box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.18);\n}\n\nlabel.disabled {\n opacity: 0.55;\n cursor: not-allowed;\n}\n\ninput:disabled {\n background: rgba(241, 240, 247, 0.7);\n cursor: not-allowed;\n}\n\n.description {\n font-size: 0.825rem;\n color: var(--af-color-fg-muted);\n}\n","import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\n\nlet inputIds = 0;\n\n@Component({\n tag: 'af-input',\n styleUrl: 'af-input.css',\n shadow: true\n})\nexport class AfInput {\n private inputId = `af-input-${++inputIds}`;\n private descriptionId = `${this.inputId}-desc`;\n\n /** Optional label text */\n @Prop() label?: string;\n\n /** Assistive description shown below the field */\n @Prop() description?: string;\n\n /** Input type attribute */\n @Prop() type: 'text' | 'email' | 'password' | 'search' = 'text';\n\n /** Placeholder text */\n @Prop() placeholder?: string;\n\n /** Current value (mutable so the component stays in sync) */\n @Prop({ mutable: true }) value = '';\n\n /** Disabled state */\n @Prop({ reflect: true }) disabled = false;\n\n /** Fired as the user types */\n @Event() afInput!: EventEmitter<string>;\n\n /** Fired when the field loses focus after a change */\n @Event() afChange!: EventEmitter<string>;\n\n private handleInput = (event: Event) => {\n const target = event.target as HTMLInputElement;\n this.value = target.value;\n this.afInput.emit(this.value);\n };\n\n private handleChange = () => {\n this.afChange.emit(this.value);\n };\n\n render() {\n const describedBy = this.description ? this.descriptionId : undefined;\n\n return (\n <label part=\"label\" class={{ disabled: this.disabled }} htmlFor={this.inputId}>\n {this.label ? (\n <span class=\"label\" part=\"label-text\">\n {this.label}\n </span>\n ) : null}\n <div class=\"control\">\n <input\n part=\"field\"\n id={this.inputId}\n type={this.type}\n placeholder={this.placeholder}\n value={this.value}\n disabled={this.disabled}\n aria-describedby={describedBy}\n onInput={this.handleInput}\n onChange={this.handleChange}\n />\n </div>\n {this.description ? (\n <p id={this.descriptionId} class=\"description\" part=\"description\">\n {this.description}\n </p>\n ) : null}\n </label>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
import { p as proxyCustomElement, H, c as createEvent, h } from './p-DOtgsZRB.js';
|
|
2
|
-
|
|
3
|
-
const afIconButtonCss = ":host{display:inline-flex}button{--button-size-sm:36px;--button-size-md:44px;width:var(--button-size-md);height:var(--button-size-md);border-radius:50%;border:none;display:inline-flex;align-items:center;justify-content:center;background:transparent;color:var(--af-color-brand-primary-500);cursor:pointer;transition:transform 120ms ease, box-shadow 160ms ease, background-color 160ms ease;box-shadow:none}button.size-sm{width:var(--button-size-sm);height:var(--button-size-sm)}button:disabled{cursor:not-allowed;opacity:0.5;box-shadow:none}button.variant-solid{background:linear-gradient(135deg, var(--af-color-brand-primary-500), var(--af-color-brand-primary-600));color:var(--af-color-fg-inverse);box-shadow:0 10px 24px rgba(124, 58, 237, 0.24)}button.variant-soft{background:rgba(124, 58, 237, 0.14);color:var(--af-color-brand-primary-500)}button.variant-ghost{border:1px solid rgba(124, 58, 237, 0.4);background:transparent}button:is(:hover,:focus-visible){transform:translateY(-1px);box-shadow:0 14px 30px rgba(124, 58, 237, 0.28)}button:active{transform:translateY(0);box-shadow:0 8px 18px rgba(124, 58, 237, 0.2)}.icon{display:inline-flex;align-items:center;justify-content:center;width:1.5em;height:1.5em}:host([disabled]) button{transform:none;box-shadow:none}";
|
|
4
|
-
|
|
5
|
-
const AfIconButton = /*@__PURE__*/ proxyCustomElement(class AfIconButton extends H {
|
|
6
|
-
constructor(registerHost) {
|
|
7
|
-
super();
|
|
8
|
-
if (registerHost !== false) {
|
|
9
|
-
this.__registerHost();
|
|
10
|
-
}
|
|
11
|
-
this.__attachShadow();
|
|
12
|
-
this.afClick = createEvent(this, "afClick");
|
|
13
|
-
/** Visual style of the icon button */
|
|
14
|
-
this.variant = 'solid';
|
|
15
|
-
/** Size preset */
|
|
16
|
-
this.size = 'md';
|
|
17
|
-
/** Disabled state */
|
|
18
|
-
this.disabled = false;
|
|
19
|
-
this.onClick = (event) => {
|
|
20
|
-
if (this.disabled) {
|
|
21
|
-
event.preventDefault();
|
|
22
|
-
event.stopPropagation();
|
|
23
|
-
return;
|
|
24
|
-
}
|
|
25
|
-
this.afClick.emit(event);
|
|
26
|
-
};
|
|
27
|
-
}
|
|
28
|
-
render() {
|
|
29
|
-
const classes = {
|
|
30
|
-
[`variant-${this.variant}`]: true,
|
|
31
|
-
[`size-${this.size}`]: true
|
|
32
|
-
};
|
|
33
|
-
return (h("button", { key: '0f63eddac5f4dab95835506b896e437218aa50e1', type: "button", class: classes, part: "base", disabled: this.disabled, "aria-label": this.label, onClick: this.onClick }, h("span", { key: '6400064df3b666cbcc0a4a51523f1cd08dcbe81a', part: "icon", class: "icon" }, h("slot", { key: 'a74fff21c0a3af05da37b12e45db8ca8913bbdea' }))));
|
|
34
|
-
}
|
|
35
|
-
static get style() { return afIconButtonCss; }
|
|
36
|
-
}, [257, "af-icon-button", {
|
|
37
|
-
"variant": [1],
|
|
38
|
-
"size": [1],
|
|
39
|
-
"label": [1],
|
|
40
|
-
"disabled": [516]
|
|
41
|
-
}]);
|
|
42
|
-
function defineCustomElement() {
|
|
43
|
-
if (typeof customElements === "undefined") {
|
|
44
|
-
return;
|
|
45
|
-
}
|
|
46
|
-
const components = ["af-icon-button"];
|
|
47
|
-
components.forEach(tagName => { switch (tagName) {
|
|
48
|
-
case "af-icon-button":
|
|
49
|
-
if (!customElements.get(tagName)) {
|
|
50
|
-
customElements.define(tagName, AfIconButton);
|
|
51
|
-
}
|
|
52
|
-
break;
|
|
53
|
-
} });
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
export { AfIconButton as A, defineCustomElement as d };
|
|
57
|
-
//# sourceMappingURL=p-D6PwARU0.js.map
|
|
58
|
-
|
|
59
|
-
//# sourceMappingURL=p-D6PwARU0.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"p-D6PwARU0.js","mappings":";;AAAA,MAAM,eAAe,GAAG,svCAAsvC;;MCOjwC,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AALzB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;;AAOU,QAAA,IAAO,CAAA,OAAA,GAA+B,OAAO;;AAG7C,QAAA,IAAI,CAAA,IAAA,GAAgB,IAAI;;AAMP,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAKjC,QAAA,IAAA,CAAA,OAAO,GAAG,CAAC,KAAiB,KAAI;AACtC,YAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,KAAK,CAAC,cAAc,EAAE;gBACtB,KAAK,CAAC,eAAe,EAAE;gBACvB;;AAGF,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;AAC1B,SAAC;AAuBF;IArBC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AACjC,YAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG;SACxB;AAED,QAAA,QACE,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,OAAO,EACd,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,YAAA,EACX,IAAI,CAAC,KAAK,EACtB,OAAO,EAAE,IAAI,CAAC,OAAO,EAAA,EAErB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,EAAA,EAC5B,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACH,CACA;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-icon-button/af-icon-button.css?tag=af-icon-button&encapsulation=shadow","src/components/af-icon-button/af-icon-button.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n}\n\nbutton {\n --button-size-sm: 36px;\n --button-size-md: 44px;\n width: var(--button-size-md);\n height: var(--button-size-md);\n border-radius: 50%;\n border: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n color: var(--af-color-brand-primary-500);\n cursor: pointer;\n transition: transform 120ms ease, box-shadow 160ms ease, background-color 160ms ease;\n box-shadow: none;\n}\n\nbutton.size-sm {\n width: var(--button-size-sm);\n height: var(--button-size-sm);\n}\n\nbutton:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n box-shadow: none;\n}\n\nbutton.variant-solid {\n background: linear-gradient(135deg, var(--af-color-brand-primary-500), var(--af-color-brand-primary-600));\n color: var(--af-color-fg-inverse);\n box-shadow: 0 10px 24px rgba(124, 58, 237, 0.24);\n}\n\nbutton.variant-soft {\n background: rgba(124, 58, 237, 0.14);\n color: var(--af-color-brand-primary-500);\n}\n\nbutton.variant-ghost {\n border: 1px solid rgba(124, 58, 237, 0.4);\n background: transparent;\n}\n\nbutton:is(:hover, :focus-visible) {\n transform: translateY(-1px);\n box-shadow: 0 14px 30px rgba(124, 58, 237, 0.28);\n}\n\nbutton:active {\n transform: translateY(0);\n box-shadow: 0 8px 18px rgba(124, 58, 237, 0.2);\n}\n\n.icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 1.5em;\n height: 1.5em;\n}\n\n:host([disabled]) button {\n transform: none;\n box-shadow: none;\n}\n","import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'af-icon-button',\n styleUrl: 'af-icon-button.css',\n shadow: true\n})\nexport class AfIconButton {\n /** Visual style of the icon button */\n @Prop() variant: 'solid' | 'soft' | 'ghost' = 'solid';\n\n /** Size preset */\n @Prop() size: 'sm' | 'md' = 'md';\n\n /** Accessible label text */\n @Prop() label?: string;\n\n /** Disabled state */\n @Prop({ reflect: true }) disabled = false;\n\n /** Raised when the button is activated */\n @Event() afClick!: EventEmitter<MouseEvent>;\n\n private onClick = (event: MouseEvent) => {\n if (this.disabled) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n\n this.afClick.emit(event);\n };\n\n render() {\n const classes = {\n [`variant-${this.variant}`]: true,\n [`size-${this.size}`]: true\n };\n\n return (\n <button\n type=\"button\"\n class={classes}\n part=\"base\"\n disabled={this.disabled}\n aria-label={this.label}\n onClick={this.onClick}\n >\n <span part=\"icon\" class=\"icon\">\n <slot />\n </span>\n </button>\n );\n }\n}\n"],"version":3}
|