@noctuatech/uswds 1.1.9 → 1.2.0

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.
Files changed (12) hide show
  1. package/package.json +1 -1
  2. package/src/lib/button/button.element.ts +55 -40
  3. package/src/lib/button/button.stories.ts +6 -0
  4. package/src/lib/icon/icon.element.ts +6 -7
  5. package/target/lib/button/button.element.d.ts +3 -2
  6. package/target/lib/button/button.element.js +25 -17
  7. package/target/lib/button/button.element.js.map +1 -1
  8. package/target/lib/button/button.stories.js +1 -1
  9. package/target/lib/button/button.stories.js.map +1 -1
  10. package/target/lib/icon/icon.element.d.ts +1 -1
  11. package/target/lib/icon/icon.element.js +6 -10
  12. package/target/lib/icon/icon.element.js.map +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@noctuatech/uswds",
3
- "version": "1.1.9",
3
+ "version": "1.2.0",
4
4
  "type": "module",
5
5
  "workspaces": ["packages/**"],
6
6
  "main": "./target/lib.js",
package/src/lib/button/button.element.ts CHANGED
@@ -1,4 +1,7 @@
1
- import { attr, css, element, html, listen, query, ready } from "@joist/element";
1
+ import "@joist/templating/define.js";
2
+
3
+ import { attr, css, element, html, listen } from "@joist/element";
4
+ import { bind } from "@joist/templating";
2
5
 
3
6
  declare global {
4
7
  interface HTMLElementTagNameMap {
@@ -30,9 +33,10 @@ export type ButtonVariant = (typeof BUTTON_VARIANTS)[number];
30
33
  border-bottom-right-radius: 0.25rem;
31
34
  border-top-left-radius: 0.25rem;
32
35
  border-bottom-left-radius: 0.25rem;
36
+ overflow: hidden;
33
37
  }
34
38
 
35
- button {
39
+ button, a {
36
40
  box-sizing: border-box;
37
41
  font-size: 1.06rem;
38
42
  line-height: 0.9;
@@ -43,10 +47,6 @@ export type ButtonVariant = (typeof BUTTON_VARIANTS)[number];
43
47
  appearance: none;
44
48
  align-items: center;
45
49
  border: 0;
46
- border-top-right-radius: inherit;
47
- border-bottom-right-radius: inherit;
48
- border-top-left-radius: inherit;
49
- border-bottom-left-radius: inherit;
50
50
  cursor: pointer;
51
51
  -moz-column-gap: 0.5rem;
52
52
  column-gap: 0.5rem;
@@ -67,111 +67,125 @@ export type ButtonVariant = (typeof BUTTON_VARIANTS)[number];
67
67
  }
68
68
  }
69
69
 
70
- button:visited {
70
+ :is(button, a):visited {
71
71
  color: white;
72
72
  }
73
73
 
74
- button:hover {
74
+ :is(button, a):hover {
75
75
  color: white;
76
76
  background-color: #1a4480;
77
77
  border-bottom: 0;
78
78
  text-decoration: none;
79
79
  }
80
80
 
81
- button:active {
81
+ :is(button, a):active {
82
82
  color: white;
83
83
  background-color: #162e51;
84
84
  }
85
85
 
86
- button:not([disabled]):focus {
86
+ :is(button, a):not([disabled]):focus {
87
87
  outline-offset: 0.25rem;
88
88
  }
89
89
 
90
- button:disabled {
90
+ :is(button, a):disabled {
91
91
  color: #454545;
92
92
  background-color: #c9c9c9;
93
93
  cursor: not-allowed;
94
94
  opacity: 1;
95
95
  }
96
96
 
97
- button:disabled:hover,
98
- button:disabled:active,
99
- button:disabled:focus {
97
+ :is(button, a):disabled:hover,
98
+ :is(button, a):disabled:active,
99
+ :is(button, a):disabled:focus {
100
100
  color: #454545;
101
101
  background-color: #c9c9c9;
102
102
  }
103
103
 
104
- button:focus {
104
+ :is(button, a):focus {
105
105
  outline: 0.25rem solid #2491ff;
106
106
  outline-offset: 0;
107
107
  }
108
108
 
109
109
  /** Secondary */
110
- :host([variant="secondary"]) button {
110
+ :host([variant="secondary"]) :is(button, a) {
111
111
  color: #fff;
112
112
  background-color: #d83933;
113
113
  }
114
114
 
115
- :host([variant="secondary"]) button:hover {
115
+ :host([variant="secondary"]) :is(button, a):hover {
116
116
  background-color: #b50909;
117
117
  }
118
118
 
119
- :host([variant="secondary"]) button:active {
119
+ :host([variant="secondary"]) :is(button, a):active {
120
120
  background-color: #8b0a03;
121
121
  }
122
122
 
123
123
  /** cool */
124
- :host([variant="cool"]) button {
124
+ :host([variant="cool"]) :is(button, a) {
125
125
  color: #1b1b1b;
126
126
  background-color: #00bde3;
127
127
  }
128
128
 
129
- :host([variant="cool"]) button:hover {
129
+ :host([variant="cool"]) :is(button, a):hover {
130
130
  background-color: #28a0cb;
131
131
  }
132
132
 
133
- :host([variant="cool"]) button:active {
133
+ :host([variant="cool"]) :is(button, a):active {
134
134
  color: #fff;
135
135
  background-color: #07648d;
136
136
  }
137
137
 
138
138
  /** warm */
139
- :host([variant="warm"]) button {
139
+ :host([variant="warm"]) :is(button, a) {
140
140
  color: #1b1b1b;
141
141
  background-color: #fa9441;
142
142
  }
143
143
 
144
- :host([variant="warm"]) button:hover {
144
+ :host([variant="warm"]) :is(button, a):hover {
145
145
  color: #fff;
146
146
  background-color: #c05600;
147
147
  }
148
148
 
149
- :host([variant="warm"]) button:active {
149
+ :host([variant="warm"]) :is(button, a):active {
150
150
  color: #fff;
151
151
  background-color: #775540;
152
152
  }
153
153
 
154
154
  /** outline */
155
- :host([variant="outline"]) button {
155
+ :host([variant="outline"]) :is(button, a) {
156
156
  background-color: transparent;
157
157
  box-shadow: inset 0 0 0 2px #005ea2;
158
158
  color: #005ea2;
159
159
  }
160
160
 
161
- :host([variant="outline"]) button:hover {
161
+ :host([variant="outline"]) :is(button, a):hover {
162
162
  box-shadow: inset 0 0 0 2px #1a4480;
163
163
  color: #1a4480;
164
164
  }
165
165
 
166
- :host([variant="outline"]) button:active {
166
+ :host([variant="outline"]) :is(button, a):active {
167
167
  box-shadow: inset 0 0 0 2px #162e51;
168
168
  color: #162e51;
169
169
  }
170
170
  `,
171
171
  html`
172
- <button tabindex="0">
173
- <slot></slot>
174
- </button>
172
+ <j-if bind="href">
173
+ <template>
174
+ <j-props>
175
+ <a $href="href" $disabled="disabled" $target="target">
176
+ <slot></slot>
177
+ </a>
178
+ </j-props>
179
+ </template>
180
+
181
+ <template else>
182
+ <j-props>
183
+ <button tabindex="0" $type="type" $disabled="disabled" $value="value">
184
+ <slot></slot>
185
+ </button>
186
+ </j-props>
187
+ </template>
188
+ </j-if>
175
189
  `,
176
190
  ],
177
191
  })
@@ -179,36 +193,37 @@ export class USAButtonElement extends HTMLElement {
179
193
  static formAssociated = true;
180
194
 
181
195
  @attr()
196
+ @bind()
182
197
  accessor type: "button" | "submit" | "reset" = "button";
183
198
 
184
199
  @attr()
200
+ @bind()
185
201
  accessor disabled = false;
186
202
 
187
203
  @attr()
188
204
  accessor variant: ButtonVariant = "primary";
189
205
 
190
206
  @attr()
207
+ @bind()
191
208
  accessor value = "";
192
209
 
210
+ @attr()
211
+ @bind()
212
+ accessor href = "";
213
+
214
+ @attr()
215
+ @bind()
216
+ accessor target = "";
217
+
193
218
  accessor tabIndex = 0;
194
219
 
195
220
  #internals = this.attachInternals();
196
- #button = query("button");
197
-
198
- @ready()
199
- onReady() {
200
- this.#button({ autofocus: this.autofocus });
201
- }
202
221
 
203
222
  @listen("click")
204
223
  onInternalClick() {
205
224
  this.#handleForm();
206
225
  }
207
226
 
208
- attributeChangedCallback() {
209
- this.#button({ type: this.type, disabled: this.disabled });
210
- }
211
-
212
227
  #handleForm() {
213
228
  const { form } = this.#internals;
214
229
 
package/src/lib/button/button.stories.ts CHANGED
@@ -16,6 +16,12 @@ const meta = {
16
16
  i === BUTTON_VARIANTS.length - 1 ? "" : "\n\n"
17
17
  }`,
18
18
  )}
19
+ ${BUTTON_VARIANTS.map(
20
+ (variant, i) =>
21
+ html`<usa-button href="#" variant=${variant}>Hello World (Link)</usa-button> ${
22
+ i === BUTTON_VARIANTS.length - 1 ? "" : "\n\n"
23
+ }`,
24
+ )}
19
25
  <usa-button disabled>Disabled</usa-button>
20
26
  </div>
21
27
  `;
package/src/lib/icon/icon.element.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { inject, injectable, injected } from "@joist/di";
1
+ import { inject, injectable } from "@joist/di";
2
2
  import { attr, css, element } from "@joist/element";
3
3
 
4
4
  import { IconService } from "../services/icon.service.js";
@@ -41,12 +41,6 @@ export class USAIconElement extends HTMLElement {
41
41
  #icon = inject(IconService);
42
42
  #injected = false;
43
43
 
44
- @injected()
45
- onInjected() {
46
- this.#injected = true;
47
- this.#updateIcon();
48
- }
49
-
50
44
  attributeChangedCallback(_: string, newVal: string, oldVal: string) {
51
45
  if (this.#injected) {
52
46
  if (newVal !== oldVal) {
@@ -55,6 +49,11 @@ export class USAIconElement extends HTMLElement {
55
49
  }
56
50
  }
57
51
 
52
+ connectedCallback() {
53
+ this.#injected = true;
54
+ this.#updateIcon();
55
+ }
56
+
58
57
  async #updateIcon() {
59
58
  const icon = this.#icon();
60
59
 
package/target/lib/button/button.element.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import "@joist/templating/define.js";
1
2
  declare global {
2
3
  interface HTMLElementTagNameMap {
3
4
  "usa-button": USAButtonElement;
@@ -12,8 +13,8 @@ export declare class USAButtonElement extends HTMLElement {
12
13
  accessor disabled: boolean;
13
14
  accessor variant: ButtonVariant;
14
15
  accessor value: string;
16
+ accessor href: string;
17
+ accessor target: string;
15
18
  accessor tabIndex: number;
16
- onReady(): void;
17
19
  onInternalClick(): void;
18
- attributeChangedCallback(): void;
19
20
  }
package/target/lib/button/button.element.js CHANGED
@@ -1,5 +1,7 @@
1
1
  import { __esDecorate, __runInitializers } from "tslib";
2
- import { attr, css, element, html, listen, query, ready } from "@joist/element";
2
+ import "@joist/templating/define.js";
3
+ import { attr, css, element, html, listen } from "@joist/element";
4
+ import { bind } from "@joist/templating";
3
5
  export const BUTTON_VARIANTS = [
4
6
  "primary",
5
7
  "secondary",
@@ -15,8 +17,8 @@ let USAButtonElement = (() => {
15
17
  delegatesFocus: true,
16
18
  },
17
19
  shadowDom: [
18
- css `:host{display:inline-block;border-top-right-radius:.25rem;border-bottom-right-radius:.25rem;border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}button{box-sizing:border-box;font-size:1.06rem;line-height:.9;color:#fff;background-color:#005ea2;-webkit-appearance:none;-moz-appearance:none;appearance:none;align-items:center;border:0;border-top-right-radius:inherit;border-bottom-right-radius:inherit;border-top-left-radius:inherit;border-bottom-left-radius:inherit;cursor:pointer;-moz-column-gap:0.5rem;column-gap:.5rem;display:inline-flex;font-weight:700;justify-content:center;padding:.75rem 1.25rem;text-align:center;text-decoration:none;width:100%;height:100%;cursor:pointer}@media all and (min-width:30em){:host{width:auto}}button:visited{color:#fff}button:hover{color:#fff;background-color:#1a4480;border-bottom:0;text-decoration:none}button:active{color:#fff;background-color:#162e51}button:not([disabled]):focus{outline-offset:0.25rem}button:disabled{color:#454545;background-color:#c9c9c9;cursor:not-allowed;opacity:1}button:disabled:active,button:disabled:focus,button:disabled:hover{color:#454545;background-color:#c9c9c9}button:focus{outline:.25rem solid #2491ff;outline-offset:0}:host([variant=secondary]) button{color:#fff;background-color:#d83933}:host([variant=secondary]) button:hover{background-color:#b50909}:host([variant=secondary]) button:active{background-color:#8b0a03}:host([variant=cool]) button{color:#1b1b1b;background-color:#00bde3}:host([variant=cool]) button:hover{background-color:#28a0cb}:host([variant=cool]) button:active{color:#fff;background-color:#07648d}:host([variant=warm]) button{color:#1b1b1b;background-color:#fa9441}:host([variant=warm]) button:hover{color:#fff;background-color:#c05600}:host([variant=warm]) button:active{color:#fff;background-color:#775540}:host([variant=outline]) button{background-color:transparent;box-shadow:inset 0 0 0 2px #005ea2;color:#005ea2}:host([variant=outline]) button:hover{box-shadow:inset 0 0 0 2px #1a4480;color:#1a4480}:host([variant=outline]) button:active{box-shadow:inset 0 0 0 2px #162e51;color:#162e51}`,
19
- html `<button tabindex="0"><slot></slot></button>`,
20
+ css `:host{display:inline-block;border-top-right-radius:.25rem;border-bottom-right-radius:.25rem;border-top-left-radius:.25rem;border-bottom-left-radius:.25rem;overflow:hidden}a,button{box-sizing:border-box;font-size:1.06rem;line-height:.9;color:#fff;background-color:#005ea2;-webkit-appearance:none;-moz-appearance:none;appearance:none;align-items:center;border:0;cursor:pointer;-moz-column-gap:0.5rem;column-gap:.5rem;display:inline-flex;font-weight:700;justify-content:center;padding:.75rem 1.25rem;text-align:center;text-decoration:none;width:100%;height:100%;cursor:pointer}@media all and (min-width:30em){:host{width:auto}}:is(button,a):visited{color:#fff}:is(button,a):hover{color:#fff;background-color:#1a4480;border-bottom:0;text-decoration:none}:is(button,a):active{color:#fff;background-color:#162e51}:is(button,a):not([disabled]):focus{outline-offset:0.25rem}:is(button,a):disabled{color:#454545;background-color:#c9c9c9;cursor:not-allowed;opacity:1}:is(button,a):disabled:active,:is(button,a):disabled:focus,:is(button,a):disabled:hover{color:#454545;background-color:#c9c9c9}:is(button,a):focus{outline:.25rem solid #2491ff;outline-offset:0}:host([variant=secondary]) :is(button,a){color:#fff;background-color:#d83933}:host([variant=secondary]) :is(button,a):hover{background-color:#b50909}:host([variant=secondary]) :is(button,a):active{background-color:#8b0a03}:host([variant=cool]) :is(button,a){color:#1b1b1b;background-color:#00bde3}:host([variant=cool]) :is(button,a):hover{background-color:#28a0cb}:host([variant=cool]) :is(button,a):active{color:#fff;background-color:#07648d}:host([variant=warm]) :is(button,a){color:#1b1b1b;background-color:#fa9441}:host([variant=warm]) :is(button,a):hover{color:#fff;background-color:#c05600}:host([variant=warm]) :is(button,a):active{color:#fff;background-color:#775540}:host([variant=outline]) :is(button,a){background-color:transparent;box-shadow:inset 0 0 0 2px #005ea2;color:#005ea2}:host([variant=outline]) :is(button,a):hover{box-shadow:inset 0 0 0 2px #1a4480;color:#1a4480}:host([variant=outline]) :is(button,a):active{box-shadow:inset 0 0 0 2px #162e51;color:#162e51}`,
21
+ html `<j-if bind="href"><template><j-props><a $href="href" $disabled="disabled" $target="target"><slot></slot></a></j-props></template><template else><j-props><button tabindex="0" $type="type" $disabled="disabled" $value="value"><slot></slot></button></j-props></template></j-if>`,
20
22
  ],
21
23
  })];
22
24
  let _classDescriptor;
@@ -36,23 +38,30 @@ let USAButtonElement = (() => {
36
38
  let _value_decorators;
37
39
  let _value_initializers = [];
38
40
  let _value_extraInitializers = [];
39
- let _onReady_decorators;
41
+ let _href_decorators;
42
+ let _href_initializers = [];
43
+ let _href_extraInitializers = [];
44
+ let _target_decorators;
45
+ let _target_initializers = [];
46
+ let _target_extraInitializers = [];
40
47
  let _onInternalClick_decorators;
41
48
  var USAButtonElement = class extends _classSuper {
42
49
  static { _classThis = this; }
43
50
  static {
44
51
  const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
45
- _type_decorators = [attr()];
46
- _disabled_decorators = [attr()];
52
+ _type_decorators = [attr(), bind()];
53
+ _disabled_decorators = [attr(), bind()];
47
54
  _variant_decorators = [attr()];
48
- _value_decorators = [attr()];
49
- _onReady_decorators = [ready()];
55
+ _value_decorators = [attr(), bind()];
56
+ _href_decorators = [attr(), bind()];
57
+ _target_decorators = [attr(), bind()];
50
58
  _onInternalClick_decorators = [listen("click")];
51
59
  __esDecorate(this, null, _type_decorators, { kind: "accessor", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_extraInitializers);
52
60
  __esDecorate(this, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
53
61
  __esDecorate(this, null, _variant_decorators, { kind: "accessor", name: "variant", static: false, private: false, access: { has: obj => "variant" in obj, get: obj => obj.variant, set: (obj, value) => { obj.variant = value; } }, metadata: _metadata }, _variant_initializers, _variant_extraInitializers);
54
62
  __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
55
- __esDecorate(this, null, _onReady_decorators, { kind: "method", name: "onReady", static: false, private: false, access: { has: obj => "onReady" in obj, get: obj => obj.onReady }, metadata: _metadata }, null, _instanceExtraInitializers);
63
+ __esDecorate(this, null, _href_decorators, { kind: "accessor", name: "href", static: false, private: false, access: { has: obj => "href" in obj, get: obj => obj.href, set: (obj, value) => { obj.href = value; } }, metadata: _metadata }, _href_initializers, _href_extraInitializers);
64
+ __esDecorate(this, null, _target_decorators, { kind: "accessor", name: "target", static: false, private: false, access: { has: obj => "target" in obj, get: obj => obj.target, set: (obj, value) => { obj.target = value; } }, metadata: _metadata }, _target_initializers, _target_extraInitializers);
56
65
  __esDecorate(this, null, _onInternalClick_decorators, { kind: "method", name: "onInternalClick", static: false, private: false, access: { has: obj => "onInternalClick" in obj, get: obj => obj.onInternalClick }, metadata: _metadata }, null, _instanceExtraInitializers);
57
66
  __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
58
67
  USAButtonElement = _classThis = _classDescriptor.value;
@@ -71,20 +80,19 @@ let USAButtonElement = (() => {
71
80
  #value_accessor_storage = (__runInitializers(this, _variant_extraInitializers), __runInitializers(this, _value_initializers, ""));
72
81
  get value() { return this.#value_accessor_storage; }
73
82
  set value(value) { this.#value_accessor_storage = value; }
74
- #tabIndex_accessor_storage = (__runInitializers(this, _value_extraInitializers), 0);
83
+ #href_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _href_initializers, ""));
84
+ get href() { return this.#href_accessor_storage; }
85
+ set href(value) { this.#href_accessor_storage = value; }
86
+ #target_accessor_storage = (__runInitializers(this, _href_extraInitializers), __runInitializers(this, _target_initializers, ""));
87
+ get target() { return this.#target_accessor_storage; }
88
+ set target(value) { this.#target_accessor_storage = value; }
89
+ #tabIndex_accessor_storage = (__runInitializers(this, _target_extraInitializers), 0);
75
90
  get tabIndex() { return this.#tabIndex_accessor_storage; }
76
91
  set tabIndex(value) { this.#tabIndex_accessor_storage = value; }
77
92
  #internals = this.attachInternals();
78
- #button = query("button");
79
- onReady() {
80
- this.#button({ autofocus: this.autofocus });
81
- }
82
93
  onInternalClick() {
83
94
  this.#handleForm();
84
95
  }
85
- attributeChangedCallback() {
86
- this.#button({ type: this.type, disabled: this.disabled });
87
- }
88
96
  #handleForm() {
89
97
  const { form } = this.#internals;
90
98
  if (form) {
package/target/lib/button/button.element.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"button.element.js","sourceRoot":"","sources":["../../../src/lib/button/button.element.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"button.element.js","sourceRoot":"","sources":["../../../src/lib/button/button.element.ts"],"names":[],"mappings":"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"}
package/target/lib/button/button.stories.js CHANGED
@@ -5,7 +5,7 @@ const meta = {
5
5
  title: "usa-button",
6
6
  tags: ["autodocs"],
7
7
  render() {
8
- return html `<div style="display:inline-flex;flex-direction:column;gap:1rem">${BUTTON_VARIANTS.map((variant, i) => html `<usa-button variant="${variant}">Hello World</usa-button>${i === BUTTON_VARIANTS.length - 1 ? "" : "\n\n"}`)}<usa-button disabled="disabled">Disabled</usa-button></div>`;
8
+ return html `<div style="display:inline-flex;flex-direction:column;gap:1rem">${BUTTON_VARIANTS.map((variant, i) => html `<usa-button variant="${variant}">Hello World</usa-button>${i === BUTTON_VARIANTS.length - 1 ? "" : "\n\n"}`)} ${BUTTON_VARIANTS.map((variant, i) => html `<usa-button href="#" variant="${variant}">Hello World (Link)</usa-button>${i === BUTTON_VARIANTS.length - 1 ? "" : "\n\n"}`)}<usa-button disabled="disabled">Disabled</usa-button></div>`;
9
9
  },
10
10
  argTypes: {},
11
11
  args: {},
package/target/lib/button/button.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"button.stories.js","sourceRoot":"","sources":["../../../src/lib/button/button.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,OAAO,EAAE,eAAe,EAAyB,MAAM,qBAAqB,CAAC;AAE7E,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,YAAY;IACnB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,eAAe,CAAC,GAAG,CACnB,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CACb,IAAI,CAAA,uBAAuB,OAAO,6BAChC,CAAC,KAAK,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAC1C,EAAE,CACL;;;KAGJ,CAAC;IACJ,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CACwB,CAAC;AAEnC,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,CAAC"}
1
+ {"version":3,"file":"button.stories.js","sourceRoot":"","sources":["../../../src/lib/button/button.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,OAAO,EAAE,eAAe,EAAyB,MAAM,qBAAqB,CAAC;AAE7E,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,YAAY;IACnB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,eAAe,CAAC,GAAG,CACnB,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CACb,IAAI,CAAA,uBAAuB,OAAO,6BAChC,CAAC,KAAK,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAC1C,EAAE,CACL;UACC,eAAe,CAAC,GAAG,CACnB,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CACb,IAAI,CAAA,gCAAgC,OAAO,oCACzC,CAAC,KAAK,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAC1C,EAAE,CACL;;;KAGJ,CAAC;IACJ,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CACwB,CAAC;AAEnC,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,CAAC"}
package/target/lib/icon/icon.element.d.ts CHANGED
@@ -8,6 +8,6 @@ export declare class USAIconElement extends HTMLElement {
8
8
  #private;
9
9
  accessor icon: USAIcon;
10
10
  ariaHidden: string | null;
11
- onInjected(): void;
12
11
  attributeChangedCallback(_: string, newVal: string, oldVal: string): void;
12
+ connectedCallback(): void;
13
13
  }
package/target/lib/icon/icon.element.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { __esDecorate, __runInitializers } from "tslib";
2
- import { inject, injectable, injected } from "@joist/di";
2
+ import { inject, injectable } from "@joist/di";
3
3
  import { attr, css, element } from "@joist/element";
4
4
  import { IconService } from "../services/icon.service.js";
5
5
  let USAIconElement = (() => {
@@ -15,34 +15,26 @@ let USAIconElement = (() => {
15
15
  let _classExtraInitializers = [];
16
16
  let _classThis;
17
17
  let _classSuper = HTMLElement;
18
- let _instanceExtraInitializers = [];
19
18
  let _icon_decorators;
20
19
  let _icon_initializers = [];
21
20
  let _icon_extraInitializers = [];
22
- let _onInjected_decorators;
23
21
  var USAIconElement = class extends _classSuper {
24
22
  static { _classThis = this; }
25
23
  static {
26
24
  const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
27
25
  _icon_decorators = [attr()];
28
- _onInjected_decorators = [injected()];
29
26
  __esDecorate(this, null, _icon_decorators, { kind: "accessor", name: "icon", static: false, private: false, access: { has: obj => "icon" in obj, get: obj => obj.icon, set: (obj, value) => { obj.icon = value; } }, metadata: _metadata }, _icon_initializers, _icon_extraInitializers);
30
- __esDecorate(this, null, _onInjected_decorators, { kind: "method", name: "onInjected", static: false, private: false, access: { has: obj => "onInjected" in obj, get: obj => obj.onInjected }, metadata: _metadata }, null, _instanceExtraInitializers);
31
27
  __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
32
28
  USAIconElement = _classThis = _classDescriptor.value;
33
29
  if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
34
30
  __runInitializers(_classThis, _classExtraInitializers);
35
31
  }
36
- #icon_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _icon_initializers, "accessibility_new"));
32
+ #icon_accessor_storage = __runInitializers(this, _icon_initializers, "accessibility_new");
37
33
  get icon() { return this.#icon_accessor_storage; }
38
34
  set icon(value) { this.#icon_accessor_storage = value; }
39
35
  ariaHidden = (__runInitializers(this, _icon_extraInitializers), "true");
40
36
  #icon = inject(IconService);
41
37
  #injected = false;
42
- onInjected() {
43
- this.#injected = true;
44
- this.#updateIcon();
45
- }
46
38
  attributeChangedCallback(_, newVal, oldVal) {
47
39
  if (this.#injected) {
48
40
  if (newVal !== oldVal) {
@@ -50,6 +42,10 @@ let USAIconElement = (() => {
50
42
  }
51
43
  }
52
44
  }
45
+ connectedCallback() {
46
+ this.#injected = true;
47
+ this.#updateIcon();
48
+ }
53
49
  async #updateIcon() {
54
50
  const icon = this.#icon();
55
51
  if (this.shadowRoot) {
package/target/lib/icon/icon.element.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"icon.element.js","sourceRoot":"","sources":["../../../src/lib/icon/icon.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEpD,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;IA+B7C,cAAc;4BAtB1B,OAAO,CAAC;YACP,OAAO,EAAE,UAAU;YACnB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;KAaF;aACF;SACF,CAAC,EACD,UAAU,CAAC;YACV,IAAI,EAAE,cAAc;SACrB,CAAC;;;;sBACkC,WAAW;;;;;;8BAAnB,SAAQ,WAAW;;;;gCAC5C,IAAI,EAAE;sCAQN,QAAQ,EAAE;YAPX,iKAAS,IAAI,6BAAJ,IAAI,mFAAgC;YAQ7C,iLAAA,UAAU,6DAGT;YAbH,6KAoCC;;;YApCY,uDAAc;;QAEzB,0BAFW,mDAAc,8CAEA,mBAAmB,GAAC;QAA7C,IAAS,IAAI,0CAAgC;QAA7C,IAAS,IAAI,gDAAgC;QAE7C,UAAU,sDAAkB,MAAM,EAAC;QAEnC,KAAK,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC;QAC5B,SAAS,GAAG,KAAK,CAAC;QAGlB,UAAU;YACR,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACtB,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC;QAED,wBAAwB,CAAC,CAAS,EAAE,MAAc,EAAE,MAAc;YAChE,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;gBACnB,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;oBACtB,IAAI,CAAC,WAAW,EAAE,CAAC;gBACrB,CAAC;YACH,CAAC;QACH,CAAC;QAED,KAAK,CAAC,WAAW;YACf,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;YAE1B,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;gBACpB,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAElD,IAAI,IAAI,CAAC,UAAU,CAAC,iBAAiB,EAAE,CAAC;oBACtC,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;gBAC7D,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;gBACtC,CAAC;YACH,CAAC;QACH,CAAC;;;;SAnCU,cAAc"}
1
+ {"version":3,"file":"icon.element.js","sourceRoot":"","sources":["../../../src/lib/icon/icon.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEpD,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;IA+B7C,cAAc;4BAtB1B,OAAO,CAAC;YACP,OAAO,EAAE,UAAU;YACnB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;KAaF;aACF;SACF,CAAC,EACD,UAAU,CAAC;YACV,IAAI,EAAE,cAAc;SACrB,CAAC;;;;sBACkC,WAAW;;;;8BAAnB,SAAQ,WAAW;;;;gCAC5C,IAAI,EAAE;YACP,iKAAS,IAAI,6BAAJ,IAAI,mFAAgC;YAF/C,6KAmCC;;;YAnCY,uDAAc;;QAEzB,qEAAyB,mBAAmB,EAAC;QAA7C,IAAS,IAAI,0CAAgC;QAA7C,IAAS,IAAI,gDAAgC;QAE7C,UAAU,sDAAkB,MAAM,EAAC;QAEnC,KAAK,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC;QAC5B,SAAS,GAAG,KAAK,CAAC;QAElB,wBAAwB,CAAC,CAAS,EAAE,MAAc,EAAE,MAAc;YAChE,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;gBACnB,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;oBACtB,IAAI,CAAC,WAAW,EAAE,CAAC;gBACrB,CAAC;YACH,CAAC;QACH,CAAC;QAED,iBAAiB;YACf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACtB,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC;QAED,KAAK,CAAC,WAAW;YACf,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;YAE1B,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;gBACpB,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAElD,IAAI,IAAI,CAAC,UAAU,CAAC,iBAAiB,EAAE,CAAC;oBACtC,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;gBAC7D,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;gBACtC,CAAC;YACH,CAAC;QACH,CAAC;;;;SAlCU,cAAc"}