@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.
@@ -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,4BA6Bf;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;CA0BjE"}
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,4BAQX;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;CA6DP"}
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,4BAsCX;IAEF,OAAO,CAAC,gBAAgB;IAkCxB,MAAM;CAkBP"}
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
- if (this.label && !this.compact) return this.renderFixedField();
1409
- const containerClass = this.hasError ? "input-error" : "";
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 selectTemplate = html`
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(html`${selectTemplate}${dialogTemplate}`);
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);