@kumori/aurora-wui-components 0.0.123 → 0.0.125
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/components/axebow-input/axebow-input-base.d.ts +1 -0
- package/dist/components/axebow-input/axebow-input-base.d.ts.map +1 -1
- package/dist/components/axebow-input/axebow-select-input.d.ts.map +1 -1
- package/dist/components/axebow-input/axebow-text-input.d.ts +0 -1
- package/dist/components/axebow-input/axebow-text-input.d.ts.map +1 -1
- package/dist/index.js +67 -64
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -20,5 +20,6 @@ export declare abstract class AxebowInputBase extends LitElement {
|
|
|
20
20
|
compact: boolean;
|
|
21
21
|
protected handleChange(e: Event): void;
|
|
22
22
|
protected renderWrapper(content: TemplateResult): TemplateResult;
|
|
23
|
+
protected renderFixedField(content: TemplateResult): TemplateResult;
|
|
23
24
|
}
|
|
24
25
|
//# sourceMappingURL=axebow-input-base.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"axebow-input-base.d.ts","sourceRoot":"","sources":["../../../src/components/axebow-input/axebow-input-base.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAIvE,OAAO,+BAA+B,CAAC;AAEvC;;;;;GAKG;AACH,8BAAsB,eAAgB,SAAQ,UAAU;IACtD,MAAM,CAAC,UAAU,
|
|
1
|
+
{"version":3,"file":"axebow-input-base.d.ts","sourceRoot":"","sources":["../../../src/components/axebow-input/axebow-input-base.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAIvE,OAAO,+BAA+B,CAAC;AAEvC;;;;;GAKG;AACH,8BAAsB,eAAgB,SAAQ,UAAU;IACtD,MAAM,CAAC,UAAU,4BAyDf;IAE0B,KAAK,SAAM;IACX,WAAW,SAAM;IACjB,KAAK,SAAM;IACX,WAAW,SAAM;IAChB,QAAQ,UAAS;IACjB,QAAQ,UAAS;IACjB,QAAQ,UAAS;IAClB,YAAY,SAAM;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,OAAO,UAAS;IAE7C,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,KAAK;IAO/B,SAAS,CAAC,aAAa,CAAC,OAAO,EAAE,cAAc,GAAG,cAAc;IA2BhE,SAAS,CAAC,gBAAgB,CAAC,OAAO,EAAE,cAAc,GAAG,cAAc;CA4BpE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"axebow-select-input.d.ts","sourceRoot":"","sources":["../../../src/components/axebow-input/axebow-select-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhD,OAAO,2DAA2D,CAAC;AACnE,OAAO,2DAA2D,CAAC;AACnE,OAAO,2DAA2D,CAAC;AACnE,OAAO,mCAAmC,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAEzD,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,cAAc,CAAC;CAChC;AAED;;;;;GAKG;AACH,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,yBAAyB,EAAE,eASvC,CAAC;AAEF,qBACa,iBAAkB,SAAQ,eAAe;IACpD,MAAM,CAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"axebow-select-input.d.ts","sourceRoot":"","sources":["../../../src/components/axebow-input/axebow-select-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhD,OAAO,2DAA2D,CAAC;AACnE,OAAO,2DAA2D,CAAC;AACnE,OAAO,2DAA2D,CAAC;AACnE,OAAO,mCAAmC,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAEzD,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,cAAc,CAAC;CAChC;AAED;;;;;GAKG;AACH,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,yBAAyB,EAAE,eASvC,CAAC;AAEF,qBACa,iBAAkB,SAAQ,eAAe;IACpD,MAAM,CAAC,MAAM,4BAiBX;IAEyB,OAAO,EAAE,YAAY,EAAE,CAAM;IAC3B,WAAW,UAAS;IACrB,WAAW,SAAkB;IAC7B,gBAAgB,SAAmB;IAClC,mBAAmB,UAAQ;IAC3B,SAAS,UAAQ;IACd,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACrF,eAAe,EAAE,eAAe,CAA6B;IAEpF,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,WAAW,CAAM;IACzB,OAAO,CAAC,kBAAkB,CAAM;IAEzC,OAAO,CAAC,kBAAkB;IAqB1B,OAAO,CAAC,UAAU;IAWlB,OAAO,CAAC,WAAW;IAuBnB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,mBAAmB;IAO3B,MAAM;CA8DP"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { AxebowInputBase } from './axebow-input-base.js';
|
|
2
2
|
export declare class AxebowTextInput extends AxebowInputBase {
|
|
3
3
|
static styles: import('lit').CSSResult[];
|
|
4
|
-
private renderFixedField;
|
|
5
4
|
render(): import('lit-html').TemplateResult;
|
|
6
5
|
}
|
|
7
6
|
//# sourceMappingURL=axebow-text-input.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"axebow-text-input.d.ts","sourceRoot":"","sources":["../../../src/components/axebow-input/axebow-text-input.ts"],"names":[],"mappings":"AAEA,OAAO,yDAAyD,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAEzD,qBACa,eAAgB,SAAQ,eAAe;IAClD,MAAM,CAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"axebow-text-input.d.ts","sourceRoot":"","sources":["../../../src/components/axebow-input/axebow-text-input.ts"],"names":[],"mappings":"AAEA,OAAO,yDAAyD,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAEzD,qBACa,eAAgB,SAAQ,eAAe;IAClD,MAAM,CAAC,MAAM,4BAaX;IAEF,MAAM;CAgBP"}
|
package/dist/index.js
CHANGED
|
@@ -1293,6 +1293,34 @@ var AxebowInputBase = class extends LitElement {
|
|
|
1293
1293
|
.input-error sl-select::part(display-input) {
|
|
1294
1294
|
color: var(--axebow-error, #e53e3e);
|
|
1295
1295
|
}
|
|
1296
|
+
|
|
1297
|
+
/* Shared anatomy for the labeled, non-compact case across every
|
|
1298
|
+
concrete input: label 17px tall, 4px gap to an optional
|
|
1299
|
+
description (also 17px tall, omitted entirely when absent - no
|
|
1300
|
+
reserved blank space), 8px gap to the 40px field box. 265.5px
|
|
1301
|
+
(16.59375rem) is the floor width - it grows with whatever space
|
|
1302
|
+
the parent gives it. Each concrete input only supplies its own
|
|
1303
|
+
field-specific 40px-height rule for its control element. */
|
|
1304
|
+
.fixed-field {
|
|
1305
|
+
display: flex;
|
|
1306
|
+
flex-direction: column;
|
|
1307
|
+
width: 100%;
|
|
1308
|
+
min-width: 16.59375rem;
|
|
1309
|
+
}
|
|
1310
|
+
.fixed-field .field-label,
|
|
1311
|
+
.fixed-field .field-description {
|
|
1312
|
+
width: 100%;
|
|
1313
|
+
height: 1.0625rem;
|
|
1314
|
+
overflow: hidden;
|
|
1315
|
+
white-space: nowrap;
|
|
1316
|
+
text-overflow: ellipsis;
|
|
1317
|
+
}
|
|
1318
|
+
.fixed-field .field-label {
|
|
1319
|
+
margin-bottom: 0.25rem;
|
|
1320
|
+
}
|
|
1321
|
+
.fixed-field .field-description {
|
|
1322
|
+
margin-bottom: 0.5rem;
|
|
1323
|
+
}
|
|
1296
1324
|
`
|
|
1297
1325
|
];
|
|
1298
1326
|
}
|
|
@@ -1322,6 +1350,28 @@ var AxebowInputBase = class extends LitElement {
|
|
|
1322
1350
|
</div>
|
|
1323
1351
|
`;
|
|
1324
1352
|
}
|
|
1353
|
+
renderFixedField(content) {
|
|
1354
|
+
return html`
|
|
1355
|
+
<div class="fixed-field">
|
|
1356
|
+
${this.label ? html`<div class="flex items-baseline gap-2 field-label">
|
|
1357
|
+
<p class="text-(--axebow-error) text-base leading-[1.0625rem] m-0">${this.required ? "*" : ""}</p>
|
|
1358
|
+
<h4 class="font-semibold text-base leading-[1.0625rem] m-0 overflow-hidden text-ellipsis">
|
|
1359
|
+
${this.label}
|
|
1360
|
+
</h4>
|
|
1361
|
+
</div>` : ""}
|
|
1362
|
+
${this.description ? html`<p class="field-description text-base leading-[1.0625rem] m-0" title="${this.description}">
|
|
1363
|
+
${this.description}
|
|
1364
|
+
</p>` : ""}
|
|
1365
|
+
${content}
|
|
1366
|
+
${this.hasError && this.errorMessage ? html`<div class="mt-1 min-h-5 text-(--axebow-error) text-sm flex items-center gap-1">
|
|
1367
|
+
<span class="text-base shrink-0"
|
|
1368
|
+
><axebow-icon iconName="error" iconColor="var(--axebow-error)"></axebow-icon
|
|
1369
|
+
></span>
|
|
1370
|
+
${this.errorMessage}
|
|
1371
|
+
</div>` : ""}
|
|
1372
|
+
</div>
|
|
1373
|
+
`;
|
|
1374
|
+
}
|
|
1325
1375
|
};
|
|
1326
1376
|
__decorate([property({ type: String })], AxebowInputBase.prototype, "value", void 0);
|
|
1327
1377
|
__decorate([property({ type: String })], AxebowInputBase.prototype, "placeholder", void 0);
|
|
@@ -1339,31 +1389,6 @@ __decorate([property({ type: Boolean })], AxebowInputBase.prototype, "compact",
|
|
|
1339
1389
|
var AxebowTextInput = class AxebowTextInput extends AxebowInputBase {
|
|
1340
1390
|
static {
|
|
1341
1391
|
this.styles = [...AxebowInputBase.baseStyles, css`
|
|
1342
|
-
/* Anatomy for the labeled text-input case: label 17px tall, 4px gap
|
|
1343
|
-
to an optional description (also 17px tall, omitted entirely when
|
|
1344
|
-
absent - no reserved blank space), 8px gap to the 40px input box.
|
|
1345
|
-
265.5px (16.59375rem) is the floor width - it grows with whatever
|
|
1346
|
-
space the parent gives it. */
|
|
1347
|
-
.fixed-field {
|
|
1348
|
-
display: flex;
|
|
1349
|
-
flex-direction: column;
|
|
1350
|
-
width: 100%;
|
|
1351
|
-
min-width: 16.59375rem;
|
|
1352
|
-
}
|
|
1353
|
-
.fixed-field .field-label,
|
|
1354
|
-
.fixed-field .field-description {
|
|
1355
|
-
width: 100%;
|
|
1356
|
-
height: 1.0625rem;
|
|
1357
|
-
overflow: hidden;
|
|
1358
|
-
white-space: nowrap;
|
|
1359
|
-
text-overflow: ellipsis;
|
|
1360
|
-
}
|
|
1361
|
-
.fixed-field .field-label {
|
|
1362
|
-
margin-bottom: 0.25rem;
|
|
1363
|
-
}
|
|
1364
|
-
.fixed-field .field-description {
|
|
1365
|
-
margin-bottom: 0.5rem;
|
|
1366
|
-
}
|
|
1367
1392
|
.fixed-field sl-input {
|
|
1368
1393
|
width: 100%;
|
|
1369
1394
|
}
|
|
@@ -1374,41 +1399,10 @@ var AxebowTextInput = class AxebowTextInput extends AxebowInputBase {
|
|
|
1374
1399
|
font-size: 0.875rem;
|
|
1375
1400
|
}
|
|
1376
1401
|
`];
|
|
1377
|
-
}
|
|
1378
|
-
renderFixedField() {
|
|
1379
|
-
const containerClass = this.hasError ? "input-error" : "";
|
|
1380
|
-
return html`
|
|
1381
|
-
<div class="fixed-field">
|
|
1382
|
-
<div class="flex items-baseline gap-2 field-label">
|
|
1383
|
-
<p class="text-(--axebow-error) text-base leading-[1.0625rem] m-0">${this.required ? "*" : ""}</p>
|
|
1384
|
-
<h4 class="font-semibold text-base leading-[1.0625rem] m-0 overflow-hidden text-ellipsis">${this.label}</h4>
|
|
1385
|
-
</div>
|
|
1386
|
-
${this.description ? html`<p class="field-description text-base leading-[1.0625rem] m-0" title="${this.description}">
|
|
1387
|
-
${this.description}
|
|
1388
|
-
</p>` : ""}
|
|
1389
|
-
<div class="${containerClass}">
|
|
1390
|
-
<sl-input
|
|
1391
|
-
@sl-input="${this.handleChange}"
|
|
1392
|
-
placeholder="${this.placeholder}"
|
|
1393
|
-
.value="${this.value}"
|
|
1394
|
-
?disabled="${this.disabled}"
|
|
1395
|
-
maxlength="${this.maxlength ?? 255}"
|
|
1396
|
-
></sl-input>
|
|
1397
|
-
</div>
|
|
1398
|
-
${this.hasError && this.errorMessage ? html`<div class="mt-1 min-h-5 text-(--axebow-error) text-sm flex items-center gap-1">
|
|
1399
|
-
<span class="text-base shrink-0"
|
|
1400
|
-
><axebow-icon iconName="error" iconColor="var(--axebow-error)"></axebow-icon
|
|
1401
|
-
></span>
|
|
1402
|
-
${this.errorMessage}
|
|
1403
|
-
</div>` : ""}
|
|
1404
|
-
</div>
|
|
1405
|
-
`;
|
|
1406
1402
|
}
|
|
1407
1403
|
render() {
|
|
1408
|
-
|
|
1409
|
-
|
|
1410
|
-
return this.renderWrapper(html`
|
|
1411
|
-
<div class="${containerClass}">
|
|
1404
|
+
const inputContent = html`
|
|
1405
|
+
<div class="${this.hasError ? "input-error" : ""}">
|
|
1412
1406
|
<sl-input
|
|
1413
1407
|
@sl-input="${this.handleChange}"
|
|
1414
1408
|
placeholder="${this.placeholder}"
|
|
@@ -1417,7 +1411,8 @@ var AxebowTextInput = class AxebowTextInput extends AxebowInputBase {
|
|
|
1417
1411
|
maxlength="${this.maxlength ?? 255}"
|
|
1418
1412
|
></sl-input>
|
|
1419
1413
|
</div>
|
|
1420
|
-
|
|
1414
|
+
`;
|
|
1415
|
+
return this.compact ? this.renderWrapper(inputContent) : this.renderFixedField(inputContent);
|
|
1421
1416
|
}
|
|
1422
1417
|
};
|
|
1423
1418
|
AxebowTextInput = __decorate([customElement("axebow-text-input")], AxebowTextInput);
|
|
@@ -1648,6 +1643,15 @@ var AxebowSelectInput = class AxebowSelectInput extends AxebowInputBase {
|
|
|
1648
1643
|
font-weight: bold;
|
|
1649
1644
|
color: var(--axebow-tertiary);
|
|
1650
1645
|
}
|
|
1646
|
+
.fixed-field sl-select {
|
|
1647
|
+
width: 100%;
|
|
1648
|
+
}
|
|
1649
|
+
.fixed-field sl-select::part(combobox) {
|
|
1650
|
+
height: 2.5rem;
|
|
1651
|
+
}
|
|
1652
|
+
.fixed-field sl-select::part(display-input) {
|
|
1653
|
+
font-size: 0.875rem;
|
|
1654
|
+
}
|
|
1651
1655
|
`];
|
|
1652
1656
|
}
|
|
1653
1657
|
handleSelectChange(e) {
|
|
@@ -1717,7 +1721,7 @@ var AxebowSelectInput = class AxebowSelectInput extends AxebowInputBase {
|
|
|
1717
1721
|
value: "__add_new__",
|
|
1718
1722
|
label: this.addNewLabel
|
|
1719
1723
|
}] : this.options;
|
|
1720
|
-
const
|
|
1724
|
+
const content = html`${html`
|
|
1721
1725
|
<div class="${containerClass}">
|
|
1722
1726
|
<sl-select
|
|
1723
1727
|
placeholder="${this.placeholder || this.emptyOptionLabel}"
|
|
@@ -1731,8 +1735,7 @@ var AxebowSelectInput = class AxebowSelectInput extends AxebowInputBase {
|
|
|
1731
1735
|
>`)}
|
|
1732
1736
|
</sl-select>
|
|
1733
1737
|
</div>
|
|
1734
|
-
|
|
1735
|
-
const dialogTemplate = this.allowAddNew ? html`
|
|
1738
|
+
`}${this.allowAddNew ? html`
|
|
1736
1739
|
<sl-dialog
|
|
1737
1740
|
?open="${this.showAddDialog}"
|
|
1738
1741
|
label="${this.addDialogLabels.title}"
|
|
@@ -1762,8 +1765,8 @@ var AxebowSelectInput = class AxebowSelectInput extends AxebowInputBase {
|
|
|
1762
1765
|
>
|
|
1763
1766
|
</div>
|
|
1764
1767
|
</sl-dialog>
|
|
1765
|
-
` : ""
|
|
1766
|
-
return this.renderWrapper(
|
|
1768
|
+
` : ""}`;
|
|
1769
|
+
return this.compact ? this.renderWrapper(content) : this.renderFixedField(content);
|
|
1767
1770
|
}
|
|
1768
1771
|
};
|
|
1769
1772
|
__decorate([property({ type: Array })], AxebowSelectInput.prototype, "options", void 0);
|