@underlayerdev/ui 0.9.4 → 0.9.5

package/fesm2022/underlayerdev-ui.mjs

@@ -3670,6 +3670,7 @@ class ToggleComponent {
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     size = input('default', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Rendered inline next to the switch (not stacked above it, unlike ul-input/ul-checkbox's form-field label). Use ng-content instead for richer projected content. */
     label = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     helperText = input(null, /* @ts-ignore */
@@ -3701,7 +3702,7 @@ class ToggleComponent {
         this.checked.set(!this.checked());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: ToggleComponent, isStandalone: true, selector: "ul-toggle", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ToggleComponent, isStandalone: true, selector: "ul-toggle", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange" }, ngImport: i0, template: `
     <div
       class="ul-toggle ul-toggle--{{ size() }}"
       [class.ul-toggle--error]="hasError()"
@@ -3709,12 +3710,6 @@ class ToggleComponent {
       [attr.aria-invalid]="hasError()"
       [attr.aria-describedby]="describedBy()"
     >
-      <ul-form-field-label
-        [label]="label()"
-        [for]="ids.controlId"
-        [size]="size() === 'sm' ? 'sm' : 'md'"
-      />
-
       <label
         class="ul-toggle__row"
         [class.ul-toggle__row--sm]="size() === 'sm'"
@@ -3739,6 +3734,9 @@ class ToggleComponent {
           <span class="ul-toggle__thumb"></span>
         </span>
         <span class="ul-toggle__label">
+          @if (label()) {
+            {{ label() }}
+          }
           <ng-content />
         </span>
       </label>
@@ -3750,11 +3748,11 @@ class ToggleComponent {
         [error]="hasError()"
       />
     </div>
-  `, isInline: true, styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-toggle{display:flex;flex-direction:column;align-items:flex-start}.ul-toggle__row{display:inline-flex;align-items:center;cursor:pointer}.ul-toggle__row:has(.ul-toggle__input:disabled){cursor:not-allowed}.ul-toggle__row:hover .ul-toggle__input:not([disabled])+.ul-toggle__track{box-shadow:0 0 0 2px #ffffff1a;border-color:#fff}.ul-toggle__row:hover .ul-toggle__input:not([disabled]):checked+.ul-toggle__track{background-color:#6f3de0;border-color:#6f3de0}.ul-toggle__row--error .ul-toggle__track{border-color:#f69d9d}.ul-toggle__row--error .ul-toggle__input:checked+.ul-toggle__track{background-color:#c33a3a;border-color:#c33a3a}.ul-toggle__row--error .ul-toggle__input:focus-visible+.ul-toggle__track{border-color:#f69d9d}.ul-toggle__row--error:hover .ul-toggle__input:not([disabled])+.ul-toggle__track{border-color:#f69d9d}.ul-toggle__row--sm .ul-toggle__track{width:32px;height:18px}.ul-toggle__row--sm .ul-toggle__thumb{width:14px;height:14px}.ul-toggle__row--sm .ul-toggle__input:checked+.ul-toggle__track .ul-toggle__thumb{transform:translate(14px)}.ul-toggle__row--sm .ul-toggle__label{font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-toggle__row--lg .ul-toggle__track{width:48px;height:28px}.ul-toggle__row--lg .ul-toggle__thumb{width:22px;height:22px}.ul-toggle__row--lg .ul-toggle__input:checked+.ul-toggle__track .ul-toggle__thumb{transform:translate(22px)}.ul-toggle__input{position:absolute;opacity:0;width:1px;height:1px}.ul-toggle__input:focus-visible+.ul-toggle__track{border-color:#ffffff80;box-shadow:0 0 0 2px #ffffff1a}.ul-toggle__input:checked+.ul-toggle__track{background-color:#6f3de0;border-color:#6f3de0}.ul-toggle__input:checked+.ul-toggle__track .ul-toggle__thumb{transform:translate(18px)}.ul-toggle__input:disabled+.ul-toggle__track{border-color:#ffffff1a;background-color:#ffffff0d}.ul-toggle__input:disabled+.ul-toggle__track .ul-toggle__thumb{background-color:#ffffff4d}.ul-toggle__input:disabled:checked+.ul-toggle__track{background-color:#ffffff0d;border-color:transparent}.ul-toggle__input:disabled~.ul-toggle__label{color:#ffffff4d}.ul-toggle__track{position:relative;flex-shrink:0;width:40px;height:22px;border-radius:4096px;border:1px solid rgba(255,255,255,.5);background-color:#fff3;transition:border-color .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1)}.ul-toggle__thumb{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:4096px;background-color:#fff;transition:transform .25s cubic-bezier(.4,0,.2,1)}.ul-toggle__label{margin-left:8px;color:#fff;transition:color .25s cubic-bezier(.4,0,.2,1);font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-toggle__label:empty{display:none}\n"], dependencies: [{ kind: "component", type: FormFieldLabelComponent, selector: "ul-form-field-label", inputs: ["label", "required", "for", "size", "showRequiredIndicator"] }, { kind: "component", type: FormFieldHelperComponent, selector: "ul-form-field-helper", inputs: ["id", "helperText", "errorText", "error"] }] });
+  `, isInline: true, styles: [".ul-rich-text{font-family:Ultra Nunito Sans;line-height:28px;font-size:18px;letter-spacing:0px;font-weight:400;color:#fff}.ul-rich-text p,.ul-rich-text ul,.ul-rich-text ol,.ul-rich-text blockquote,.ul-rich-text pre{margin-top:0;margin-bottom:16px}.ul-rich-text:last-child,.ul-rich-text p:last-child,.ul-rich-text ul:last-child,.ul-rich-text ol:last-child,.ul-rich-text blockquote:last-child,.ul-rich-text pre:last-child{margin-bottom:0}.ul-rich-text h1,.ul-rich-text h2,.ul-rich-text h3,.ul-rich-text h4,.ul-rich-text h5,.ul-rich-text h6{margin-top:32px;margin-bottom:12px;font-weight:1000}.ul-rich-text h1{font-family:Ultra Nunito Sans;line-height:48px;font-size:48px;letter-spacing:-.48px;font-weight:1000}.ul-rich-text h2{font-family:Ultra Nunito Sans;line-height:48px;font-size:40px;letter-spacing:-.4px;font-weight:1000}.ul-rich-text h3{font-family:Ultra Nunito Sans;line-height:44px;font-size:36px;letter-spacing:-.36px;font-weight:1000}.ul-rich-text h4{font-family:Ultra Nunito Sans;line-height:40px;font-size:32px;letter-spacing:-.32px;font-weight:1000}.ul-rich-text h5{font-family:Ultra Nunito Sans;line-height:36px;font-size:28px;letter-spacing:-.28px;font-weight:1000}.ul-rich-text h6{font-family:Ultra Nunito Sans;line-height:36px;font-size:24px;letter-spacing:-.24px;font-weight:1000}.ul-rich-text ul,.ul-rich-text ol{padding-left:24px}.ul-rich-text ul ul,.ul-rich-text ul ol,.ul-rich-text ol ul,.ul-rich-text ol ol{margin-top:8px;margin-bottom:8px}.ul-rich-text li{margin-top:4px;margin-bottom:4px}.ul-rich-text strong{font-weight:800}.ul-rich-text code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text em{font-style:italic}.ul-rich-text a{color:#c2a8ff;text-decoration:underline;text-decoration-thickness:1px}.ul-rich-text a:hover{color:#d6c5ff}.ul-rich-text a:active{color:#a781ff}.ul-rich-text pre{padding:16px;border-radius:8px;background-color:#3b3b3b;overflow-x:auto}.ul-rich-text pre code{font-family:Roboto Mono;line-height:20px;font-size:14px;letter-spacing:0px;font-weight:400}.ul-rich-text blockquote{margin-left:0;padding-left:16px;border-left-width:2px;border-left-style:solid;border-left-color:#ffffff1a;color:#ffffffb3}.ul-rich-text--muted{color:#ffffffb3}.ul-rich-text--inverse,.ul-rich-text--inverse a{color:#000}.ul-rich-text--inverse a:hover,.ul-rich-text--inverse a:active{color:#000000b3}.ul-rich-text--body-m{font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-rich-text--compact p,.ul-rich-text--compact ul,.ul-rich-text--compact ol,.ul-rich-text--compact blockquote,.ul-rich-text--compact pre{margin-bottom:8px}.ul-rich-text--compact h1,.ul-rich-text--compact h2,.ul-rich-text--compact h3,.ul-rich-text--compact h4,.ul-rich-text--compact h5,.ul-rich-text--compact h6{margin-top:16px;margin-bottom:8px}.ul-toggle{display:flex;flex-direction:column;align-items:flex-start}.ul-toggle__row{display:inline-flex;align-items:center;cursor:pointer}.ul-toggle__row:has(.ul-toggle__input:disabled){cursor:not-allowed}.ul-toggle__row:hover .ul-toggle__input:not([disabled])+.ul-toggle__track{box-shadow:0 0 0 2px #ffffff1a;border-color:#fff}.ul-toggle__row:hover .ul-toggle__input:not([disabled]):checked+.ul-toggle__track{background-color:#6f3de0;border-color:#6f3de0}.ul-toggle__row--error .ul-toggle__track{border-color:#f69d9d}.ul-toggle__row--error .ul-toggle__input:checked+.ul-toggle__track{background-color:#c33a3a;border-color:#c33a3a}.ul-toggle__row--error .ul-toggle__input:focus-visible+.ul-toggle__track{border-color:#f69d9d}.ul-toggle__row--error:hover .ul-toggle__input:not([disabled])+.ul-toggle__track{border-color:#f69d9d}.ul-toggle__row--sm .ul-toggle__track{width:32px;height:18px}.ul-toggle__row--sm .ul-toggle__thumb{width:14px;height:14px}.ul-toggle__row--sm .ul-toggle__input:checked+.ul-toggle__track .ul-toggle__thumb{transform:translate(14px)}.ul-toggle__row--sm .ul-toggle__label{font-family:Ultra Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400}.ul-toggle__row--lg .ul-toggle__track{width:48px;height:28px}.ul-toggle__row--lg .ul-toggle__thumb{width:22px;height:22px}.ul-toggle__row--lg .ul-toggle__input:checked+.ul-toggle__track .ul-toggle__thumb{transform:translate(22px)}.ul-toggle__input{position:absolute;opacity:0;width:1px;height:1px}.ul-toggle__input:focus-visible+.ul-toggle__track{border-color:#ffffff80;box-shadow:0 0 0 2px #ffffff1a}.ul-toggle__input:checked+.ul-toggle__track{background-color:#6f3de0;border-color:#6f3de0}.ul-toggle__input:checked+.ul-toggle__track .ul-toggle__thumb{transform:translate(18px)}.ul-toggle__input:disabled+.ul-toggle__track{border-color:#ffffff1a;background-color:#ffffff0d}.ul-toggle__input:disabled+.ul-toggle__track .ul-toggle__thumb{background-color:#ffffff4d}.ul-toggle__input:disabled:checked+.ul-toggle__track{background-color:#ffffff0d;border-color:transparent}.ul-toggle__input:disabled~.ul-toggle__label{color:#ffffff4d}.ul-toggle__track{position:relative;flex-shrink:0;width:40px;height:22px;border-radius:4096px;border:1px solid rgba(255,255,255,.5);background-color:#fff3;transition:border-color .25s cubic-bezier(.4,0,.2,1),background-color .25s cubic-bezier(.4,0,.2,1)}.ul-toggle__thumb{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:4096px;background-color:#fff;transition:transform .25s cubic-bezier(.4,0,.2,1)}.ul-toggle__label{margin-left:8px;color:#fff;transition:color .25s cubic-bezier(.4,0,.2,1);font-family:Ultra Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400}.ul-toggle__label:empty{display:none}\n"], dependencies: [{ kind: "component", type: FormFieldHelperComponent, selector: "ul-form-field-helper", inputs: ["id", "helperText", "errorText", "error"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ul-toggle', imports: [FormFieldLabelComponent, FormFieldHelperComponent], template: `
+            args: [{ selector: 'ul-toggle', imports: [FormFieldHelperComponent], template: `
     <div
       class="ul-toggle ul-toggle--{{ size() }}"
       [class.ul-toggle--error]="hasError()"
@@ -3762,12 +3760,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
       [attr.aria-invalid]="hasError()"
       [attr.aria-describedby]="describedBy()"
     >
-      <ul-form-field-label
-        [label]="label()"
-        [for]="ids.controlId"
-        [size]="size() === 'sm' ? 'sm' : 'md'"
-      />
-
       <label
         class="ul-toggle__row"
         [class.ul-toggle__row--sm]="size() === 'sm'"
@@ -3792,6 +3784,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
           <span class="ul-toggle__thumb"></span>
         </span>
         <span class="ul-toggle__label">
+          @if (label()) {
+            {{ label() }}
+          }
           <ng-content />
         </span>
       </label>