@uni-design-system/uni-angular 7.1.0 → 7.2.0

package/fesm2022/uni-design-system-uni-angular.mjs

@@ -1388,7 +1388,13 @@ class UniIconComponent {
         const size = this.size();
         if (size === undefined || size === null || size === '')
             return null;
-        return typeof size === 'number' ? `${size}px` : size;
+        if (typeof size === 'number')
+            return `${size}px`;
+        // A static attribute (`size="24"`) arrives as a string, so a bare number
+        // has to mean px here too — otherwise it emits the invalid `width: 24`,
+        // which the browser drops, silently falling back to filling the container.
+        const trimmed = size.trim();
+        return /^-?\d*\.?\d+$/.test(trimmed) ? `${trimmed}px` : trimmed;
     }, ...(ngDevMode ? [{ debugName: "sizeValue" }] : /* istanbul ignore next */ []));
     className = computed(() => css([{ ...this.themeService.color(this.color()) }]), ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -2285,6 +2291,20 @@ class UniIconButtonComponent {
     loading = input(...(ngDevMode ? [undefined, { debugName: "loading" }] : /* istanbul ignore next */ []));
     opticalSize = input(24, ...(ngDevMode ? [{ debugName: "opticalSize" }] : /* istanbul ignore next */ []));
     srOnlyClass = css(visuallyHidden);
+    /**
+     * Sizes `iconName` from the size token's `fontSize`, the same value that sizes
+     * a `symbolName` ligature — so the two paths render the same glyph size and
+     * `symbolName` → `iconName` is a like-for-like swap. Without it a masked icon
+     * fills the whole button box, since the base size tokens carry no padding.
+     * Themes that do use padding (Carbon) set a matching `fontSize`, so they land
+     * on the same glyph either way.
+     */
+    glyphSize = computed(() => {
+        // Size tokens are Emotion style objects, so `fontSize` is typed wider than
+        // a CSS length; anything exotic falls back to filling the button as before.
+        const fontSize = this.config().sizes?.[this.size()]?.fontSize;
+        return typeof fontSize === 'number' || typeof fontSize === 'string' ? fontSize : undefined;
+    }, ...(ngDevMode ? [{ debugName: "glyphSize" }] : /* istanbul ignore next */ []));
     className = computed(() => {
         const { sizes, variants } = this.config();
         const sizeConfig = sizes && sizes[this.size()];
@@ -2300,7 +2320,15 @@ class UniIconButtonComponent {
                 // Token-driven radius (`max` = circle) with the legacy 999 fallback
                 // for hand-authored themes that predate iconButton options.
                 ...(this.theme.radius(this.config().options?.borderRadius) ?? { borderRadius: 999 }),
-                display: 'block',
+                // Block-level, but centring: the size tokens make the box bigger than
+                // the glyph (an `sm` button is 22px around an 18px icon), so a plain
+                // `display: block` parks the glyph in the top-left corner. Flex is
+                // still block-level, so nothing about the button's own layout changes.
+                // The accessible-name span is absolutely positioned and so stays out
+                // of the flex flow.
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
                 '&:disabled': {
                     cursor: 'not-allowed !important',
                 },
@@ -2343,7 +2371,7 @@ class UniIconButtonComponent {
     } @else if (symbolName()) {
       <uni-symbol [name]="symbolName()!" [opticalSize]="opticalSize()" />
     } @else if (iconName()) {
-      <uni-icon [name]="iconName()!" />
+      <uni-icon [name]="iconName()!" [size]="glyphSize()" />
     }
     <!-- Projected text is the button's accessible name (visually hidden) -->
     <span [class]="srOnlyClass"><ng-content /></span>
@@ -2360,7 +2388,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
     } @else if (symbolName()) {
       <uni-symbol [name]="symbolName()!" [opticalSize]="opticalSize()" />
     } @else if (iconName()) {
-      <uni-icon [name]="iconName()!" />
+      <uni-icon [name]="iconName()!" [size]="glyphSize()" />
     }
     <!-- Projected text is the button's accessible name (visually hidden) -->
     <span [class]="srOnlyClass"><ng-content /></span>
@@ -3466,6 +3494,15 @@ class UniExpandComponent {
     toggle() {
         this.collapsed.update((collapsed) => !collapsed);
     }
+    /**
+     * A custom element is `display: inline` by default, which would lay the
+     * animated grid out as a block-in-inline box and distort the revealed
+     * content's spacing. Every consumer would otherwise have to write
+     * `uni-expand { display: block }` themselves.
+     */
+    hostClassName = css({
+        display: 'block',
+    });
     expandClassName = css({
         display: 'grid',
     });
@@ -3474,16 +3511,25 @@ class UniExpandComponent {
     });
     expand = keyframes({ ...expandFadeIn });
     collapse = keyframes({ ...collapseFadeOut });
-    expandAnimation = css({
+    /**
+     * Reveal is motion-safe (WCAG 2.3.3): under `prefers-reduced-motion` these
+     * classes are empty, so the region appears and disappears instantly.
+     * `overflow: hidden` rides inside the guard deliberately — it exists to clip
+     * the growing box mid-animation, and leaving it applied at rest would crop
+     * decorations that legitimately paint outside the region (focus rings,
+     * offset outlines). Angular removes a leaving node on the next frame when it
+     * detects no animation, so nothing hangs when the guard strips them.
+     */
+    expandAnimation = css(motionSafe({
         overflow: 'hidden',
         animation: `${this.expand} ease-in 350ms`,
-    });
-    collapseAnimation = css({
+    }));
+    collapseAnimation = css(motionSafe({
         overflow: 'hidden',
         animation: `${this.collapse} ease-in 350ms`,
-    });
+    }));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniExpandComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniExpandComponent, isStandalone: true, selector: "uni-expand", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { properties: { "attr.id": "regionId" } }, ngImport: i0, template: `@if (!collapsed()) {
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniExpandComponent, isStandalone: true, selector: "uni-expand", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { properties: { "attr.id": "regionId", "class": "hostClassName" } }, ngImport: i0, template: `@if (!collapsed()) {
     <div
       [animate.enter]="ready() ? expandAnimation : ''"
       [animate.leave]="collapseAnimation"
@@ -3514,6 +3560,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
   }`,
                     host: {
                         '[attr.id]': 'regionId',
+                        '[class]': 'hostClassName',
                     },
                 }]
         }], ctorParameters: () => [], propDecorators: { collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }] } });
@@ -3700,66 +3747,151 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { hoverDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverDelay", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], inlineText: [{ type: i0.Input, args: [{ isSignal: true, alias: "inlineText", required: false }] }], appendToBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendToBody", required: false }] }], tipRef: [{ type: i0.ViewChild, args: ['tip', { isSignal: true }] }] } });
 
+/**
+ * Trigger for a {@link UniExpandComponent} region.
+ *
+ * Two shapes, chosen by whether `label` is set:
+ * - **Icon only** (default) — the bare chevron, sized for a Card Header.
+ * - **Labelled** — chevron plus a label and optional muted sublabel, as a
+ *   single full-width button. Most real disclosures need a name for the
+ *   section, and building that row by hand is the thing this saves; it also
+ *   makes the label the button's accessible name rather than adjacent text.
+ */
 class UniExpandToggleComponent {
     collapsed = model(true, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
     /** Id of the Expand region this toggle controls (see UniExpandComponent.regionId). */
     ariaControls = input(...(ngDevMode ? [undefined, { debugName: "ariaControls" }] : /* istanbul ignore next */ []));
+    /** Names the region. Setting it switches the toggle to its labelled shape. */
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Muted qualifier beside the label ("for POs & custom orders"). Needs `label`. */
+    sublabel = input(...(ngDevMode ? [undefined, { debugName: "sublabel" }] : /* istanbul ignore next */ []));
+    /**
+     * The glyph rotates, never the host.
+     *
+     * The host is the tooltip's positioning box — `uni-tooltip` puts its
+     * `anchor-name` on its own element, nested inside ours — so rotating the
+     * host swings the anchor through the turn and the bubble visibly bobs. The
+     * host is also taller than the glyph (an inline-level box reserves baseline
+     * descender space), so spinning it about its own centre walks the glyph
+     * off-centre. `uni-icon` is a centred square sized to the glyph, which makes
+     * it the only box here that rotates symmetrically. It also keeps a label
+     * from turning upside down with the chevron.
+     */
+    glyphStyles = computed(() => ({
+        '& uni-icon': {
+            flexShrink: 0,
+            ...motionSafe({ transition: 'transform 350ms ease-in-out' }),
+            transform: this.collapsed() ? 'rotate(-180deg)' : 'rotate(0)',
+        },
+    }), ...(ngDevMode ? [{ debugName: "glyphStyles" }] : /* istanbul ignore next */ []));
     className = computed(() => {
+        if (this.label()) {
+            return css({ display: 'block', ...this.glyphStyles() });
+        }
         return css({
             display: 'inline-flex',
             cursor: 'pointer',
-            transition: 'transform 350ms ease-in-out',
-            transform: 'rotate(0)',
-            '&[toggled]': {
-                transform: 'rotate(-180deg)',
-            },
+            ...this.glyphStyles(),
         });
     }, ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    triggerClassName = css({
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8,
+        width: '100%',
+        padding: 0,
+        border: 0,
+        background: 'none',
+        font: 'inherit',
+        color: 'inherit',
+        textAlign: 'left',
+        cursor: 'pointer',
+    });
+    labelClassName = css({
+        display: 'flex',
+        alignItems: 'baseline',
+        gap: 6,
+        minWidth: 0,
+    });
     toggle() {
         this.collapsed.update((collapsed) => !collapsed);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniExpandToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniExpandToggleComponent, isStandalone: true, selector: "uni-expand-toggle", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, ariaControls: { classPropertyName: "ariaControls", publicName: "ariaControls", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { properties: { "class": "className()", "attr.toggled": "collapsed() || null" } }, ngImport: i0, template: `<uni-tooltip
-    [label]="collapsed() ? 'Expand' : 'Collapse'"
-    placement="right"
-  >
-    <button
-      icon-button
-      iconName="chevronUp"
-      (click)="toggle()"
-      [attr.aria-expanded]="!collapsed()"
-      [attr.aria-controls]="ariaControls() || null"
-    >
-      {{ collapsed() ? 'Expand' : 'Collapse' }}
-    </button>
-  </uni-tooltip>`, isInline: true, dependencies: [{ kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["ariaLabel", "iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "component", type: UniTooltipComponent, selector: "uni-tooltip", inputs: ["hoverDelay", "label", "placement", "inlineText", "appendToBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniExpandToggleComponent, isStandalone: true, selector: "uni-expand-toggle", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, ariaControls: { classPropertyName: "ariaControls", publicName: "ariaControls", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { properties: { "class": "className()", "attr.toggled": "collapsed() || null" } }, ngImport: i0, template: `
+    @if (label()) {
+      <button
+        type="button"
+        [class]="triggerClassName"
+        (click)="toggle()"
+        [attr.aria-expanded]="!collapsed()"
+        [attr.aria-controls]="ariaControls() || null"
+      >
+        <uni-icon name="chevronUp" size="1em" />
+        <span [class]="labelClassName">
+          <span uni-text="label">{{ label() }}</span>
+          @if (sublabel()) {
+            <span uni-text="caption" color="on-background-variant">{{ sublabel() }}</span>
+          }
+        </span>
+      </button>
+    } @else {
+      <uni-tooltip [label]="collapsed() ? 'Expand' : 'Collapse'" placement="right">
+        <button
+          icon-button
+          iconName="chevronUp"
+          (click)="toggle()"
+          [attr.aria-expanded]="!collapsed()"
+          [attr.aria-controls]="ariaControls() || null"
+        >
+          {{ collapsed() ? 'Expand' : 'Collapse' }}
+        </button>
+      </uni-tooltip>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: UniIconComponent, selector: "uni-icon", inputs: ["color", "name", "size"] }, { kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["ariaLabel", "iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "component", type: UniTextComponent, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniTooltipComponent, selector: "uni-tooltip", inputs: ["hoverDelay", "label", "placement", "inlineText", "appendToBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniExpandToggleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'uni-expand-toggle',
-                    imports: [UniIconButtonComponent, UniTooltipComponent],
-                    template: `<uni-tooltip
-    [label]="collapsed() ? 'Expand' : 'Collapse'"
-    placement="right"
-  >
-    <button
-      icon-button
-      iconName="chevronUp"
-      (click)="toggle()"
-      [attr.aria-expanded]="!collapsed()"
-      [attr.aria-controls]="ariaControls() || null"
-    >
-      {{ collapsed() ? 'Expand' : 'Collapse' }}
-    </button>
-  </uni-tooltip>`,
+                    imports: [UniIconComponent, UniIconButtonComponent, UniTextComponent, UniTooltipComponent],
+                    template: `
+    @if (label()) {
+      <button
+        type="button"
+        [class]="triggerClassName"
+        (click)="toggle()"
+        [attr.aria-expanded]="!collapsed()"
+        [attr.aria-controls]="ariaControls() || null"
+      >
+        <uni-icon name="chevronUp" size="1em" />
+        <span [class]="labelClassName">
+          <span uni-text="label">{{ label() }}</span>
+          @if (sublabel()) {
+            <span uni-text="caption" color="on-background-variant">{{ sublabel() }}</span>
+          }
+        </span>
+      </button>
+    } @else {
+      <uni-tooltip [label]="collapsed() ? 'Expand' : 'Collapse'" placement="right">
+        <button
+          icon-button
+          iconName="chevronUp"
+          (click)="toggle()"
+          [attr.aria-expanded]="!collapsed()"
+          [attr.aria-controls]="ariaControls() || null"
+        >
+          {{ collapsed() ? 'Expand' : 'Collapse' }}
+        </button>
+      </uni-tooltip>
+    }
+  `,
                     host: {
                         '[class]': 'className()',
                         '[attr.toggled]': 'collapsed() || null',
                     },
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], ariaControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaControls", required: false }] }] } });
+        }], propDecorators: { collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], ariaControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaControls", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }] } });
 
 class UniExpandAreaComponent {
     title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
@@ -3804,7 +3936,7 @@ class UniExpandAreaComponent {
         </div>
       </uni-expand>
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: UniBoxComponent, selector: "[uni-box-layout], [box-layout]", inputs: ["color", "backgroundColor", "borderRadius", "borderRadiusLeft", "borderRadiusRight", "borderRadiusTop", "borderRadiusBottom", "padding", "paddingHorizontal", "paddingVertical", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "border", "borderTop", "borderBottom", "borderLeft", "borderRight", "dashBorder", "alignSelf", "alignItems", "alignContent", "justifyContent", "grow", "display", "position", "inset", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "ignoreDir", "gridArea", "gridColumn", "gridRow", "overflow", "elevation", "shadow", "gap", "fullWidth", "fullHeight", "flexDirection", "textAlign", "wrapItems", "zIndex"] }, { kind: "component", type: UniTextComponent, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniExpandToggleComponent, selector: "uni-expand-toggle", inputs: ["collapsed", "ariaControls"], outputs: ["collapsedChange"] }, { kind: "component", type: UniExpandComponent, selector: "uni-expand", inputs: ["collapsed"], outputs: ["collapsedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: UniBoxComponent, selector: "[uni-box-layout], [box-layout]", inputs: ["color", "backgroundColor", "borderRadius", "borderRadiusLeft", "borderRadiusRight", "borderRadiusTop", "borderRadiusBottom", "padding", "paddingHorizontal", "paddingVertical", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "border", "borderTop", "borderBottom", "borderLeft", "borderRight", "dashBorder", "alignSelf", "alignItems", "alignContent", "justifyContent", "grow", "display", "position", "inset", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "ignoreDir", "gridArea", "gridColumn", "gridRow", "overflow", "elevation", "shadow", "gap", "fullWidth", "fullHeight", "flexDirection", "textAlign", "wrapItems", "zIndex"] }, { kind: "component", type: UniTextComponent, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniExpandToggleComponent, selector: "uni-expand-toggle", inputs: ["collapsed", "ariaControls", "label", "sublabel"], outputs: ["collapsedChange"] }, { kind: "component", type: UniExpandComponent, selector: "uni-expand", inputs: ["collapsed"], outputs: ["collapsedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniExpandAreaComponent, decorators: [{
             type: Component,