@skyux/code-examples 12.0.0-alpha.4 → 12.0.0-alpha.5

package/fesm2022/skyux-code-examples.mjs

@@ -6571,24 +6571,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
         }] });
 
 class FlyoutCustomHeadersExampleComponent {
+    constructor() {
+        this.recordNumber = 0;
+        this.#flyoutSvc = inject(SkyFlyoutService);
+    }
+    primaryActionCallback() {
+        alert('Primary action clicked!');
+    }
     #flyout;
-    #flyoutSvc = inject(SkyFlyoutService);
+    #flyoutSvc;
     openFlyoutWithIterators() {
         this.#flyout = this.#flyoutSvc.open(FlyoutComponent, {
             ariaLabelledBy: 'flyout-title',
             ariaRole: 'dialog',
             showIterator: true,
+            iteratorNextButtonDisabled: this.#nextButtonDisabled(),
+            iteratorPreviousButtonDisabled: this.#previousButtonDisabled(),
         });
         this.#flyout.iteratorNextButtonClick.subscribe(() => {
             alert('Next iterator button clicked!');
+            this.recordNumber += 1;
+            this.#flyout.iteratorNextButtonDisabled = this.#nextButtonDisabled();
+            this.#flyout.iteratorPreviousButtonDisabled =
+                this.#previousButtonDisabled();
         });
         this.#flyout.iteratorPreviousButtonClick.subscribe(() => {
             alert('Previous iterator button clicked!');
+            this.recordNumber -= 1;
+            this.#flyout.iteratorNextButtonDisabled = this.#nextButtonDisabled();
+            this.#flyout.iteratorPreviousButtonDisabled =
+                this.#previousButtonDisabled();
         });
         this.#flyout.closed.subscribe(() => {
             this.#flyout = undefined;
         });
     }
+    openFlyoutWithPrimaryAction() {
+        this.#flyout = this.#flyoutSvc.open(FlyoutComponent, {
+            ariaLabelledBy: 'flyout-title',
+            ariaRole: 'dialog',
+            primaryAction: {
+                label: 'Save',
+                callback: () => {
+                    this.primaryActionCallback();
+                },
+            },
+        });
+    }
     openFlyoutWithRoutePermalink() {
         this.#flyout = this.#flyoutSvc.open(FlyoutComponent, {
             ariaLabelledBy: 'flyout-title',
@@ -6623,12 +6652,18 @@ class FlyoutCustomHeadersExampleComponent {
             this.#flyout = undefined;
         });
     }
+    #nextButtonDisabled() {
+        return this.recordNumber >= 3;
+    }
+    #previousButtonDisabled() {
+        return this.recordNumber <= 0;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FlyoutCustomHeadersExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: FlyoutCustomHeadersExampleComponent, isStandalone: true, selector: "app-flyout-custom-headers-example", ngImport: i0, template: "<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openFlyoutWithUrlPermalink()\"\n>\n  Open flyout with a URL permalink\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openFlyoutWithRoutePermalink()\"\n>\n  Open flyout with an Angular routing permalink\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openFlyoutWithIterators()\"\n>\n  Open flyout with iterators\n</button>\n" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: FlyoutCustomHeadersExampleComponent, isStandalone: true, selector: "app-flyout-custom-headers-example", ngImport: i0, template: "<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openFlyoutWithUrlPermalink()\"\n>\n  Open flyout with a URL permalink\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openFlyoutWithRoutePermalink()\"\n>\n  Open flyout with an Angular routing permalink\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openFlyoutWithIterators()\"\n>\n  Open flyout with iterators\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openFlyoutWithPrimaryAction()\"\n>\n  Open flyout with primary action\n</button>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FlyoutCustomHeadersExampleComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'app-flyout-custom-headers-example', template: "<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openFlyoutWithUrlPermalink()\"\n>\n  Open flyout with a URL permalink\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openFlyoutWithRoutePermalink()\"\n>\n  Open flyout with an Angular routing permalink\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openFlyoutWithIterators()\"\n>\n  Open flyout with iterators\n</button>\n" }]
+            args: [{ standalone: true, selector: 'app-flyout-custom-headers-example', template: "<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openFlyoutWithUrlPermalink()\"\n>\n  Open flyout with a URL permalink\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openFlyoutWithRoutePermalink()\"\n>\n  Open flyout with an Angular routing permalink\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openFlyoutWithIterators()\"\n>\n  Open flyout with iterators\n</button>\n\n<button\n  class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n  type=\"button\"\n  (click)=\"openFlyoutWithPrimaryAction()\"\n>\n  Open flyout with primary action\n</button>\n" }]
         }] });
 
 class ErrorsErrorEmbeddedExampleComponent {
@@ -9447,7 +9482,7 @@ class LookupCountryFieldBasicExampleComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LookupCountryFieldBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: LookupCountryFieldBasicExampleComponent, isStandalone: true, selector: "app-lookup-country-field-basic-example", ngImport: i0, template: "<form [formGroup]=\"countryForm\">\n  <sky-input-box\n    data-sky-id=\"country-field\"\n    hintText=\"If you have multiple countries, choose your primary country.\"\n    labelText=\"Country\"\n    [helpPopoverContent]=\"helpPopoverContent\"\n  >\n    <sky-country-field formControlName=\"country\" />\n    @if (countryControl.errors?.['invalidCountry']) {\n      <sky-form-error\n        errorName=\"invalidCountry\"\n        errorText=\"This country is no longer available for the date you selected.\"\n      />\n    }\n  </sky-input-box>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyCountryFieldModule }, { kind: "component", type: i3$3.λ3, selector: "sky-country-field", inputs: ["autocompleteAttribute", "defaultCountry", "disabled", "hideSelectedCountryFlag", "includePhoneInfo", "supportedCountryISOs"], outputs: ["selectedCountryChange"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "component", type: i2.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: LookupCountryFieldBasicExampleComponent, isStandalone: true, selector: "app-lookup-country-field-basic-example", ngImport: i0, template: "<form [formGroup]=\"countryForm\">\n  <sky-input-box\n    data-sky-id=\"country-field\"\n    hintText=\"If you have multiple countries, choose your primary country.\"\n    labelText=\"Country\"\n    [helpPopoverContent]=\"helpPopoverContent\"\n  >\n    <sky-country-field formControlName=\"country\" />\n    @if (countryControl.errors?.['invalidCountry']) {\n      <sky-form-error\n        errorName=\"invalidCountry\"\n        errorText=\"This country is no longer available for the date you selected.\"\n      />\n    }\n  </sky-input-box>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyCountryFieldModule }, { kind: "component", type: i3$3.λ3, selector: "sky-country-field", inputs: ["autocompleteAttribute", "defaultCountry", "disabled", "includePhoneInfo", "supportedCountryISOs"], outputs: ["selectedCountryChange"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "component", type: i2.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LookupCountryFieldBasicExampleComponent, decorators: [{
             type: Component,