@skyux/code-examples 12.0.0-alpha.12 → 12.0.0-alpha.13

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.
@@ -9013,7 +9013,7 @@ class ListsFilterInlineExampleComponent {
9013
9013
  return result;
9014
9014
  }
9015
9015
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ListsFilterInlineExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
9016
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: ListsFilterInlineExampleComponent, isStandalone: true, selector: "app-lists-filter-inline-example", ngImport: i0, template: "<sky-toolbar>\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-filter-button\n [active]=\"filtersActive\"\n [ariaControls]=\"inlineFilters.id\"\n [ariaExpanded]=\"showInlineFilters\"\n [showButtonText]=\"true\"\n (filterButtonClick)=\"filterButtonClicked()\"\n />\n </sky-toolbar-item>\n </sky-toolbar-section>\n</sky-toolbar>\n\n<div #inlineFilters skyId [hidden]=\"!showInlineFilters\">\n <sky-filter-inline>\n <sky-filter-inline-item>\n <sky-input-box labelText=\"Fruit type\">\n <select [ngModel]=\"fruitType\" (ngModelChange)=\"fruitTypeChange($event)\">\n <option value=\"any\">Any fruit</option>\n <option value=\"citrus\">Citrus</option>\n <option value=\"berry\">Berry</option>\n </select>\n </sky-input-box>\n </sky-filter-inline-item>\n <sky-filter-inline-item>\n <sky-checkbox\n labelText=\"Hide orange fruits\"\n [ngModel]=\"hideOrange\"\n (ngModelChange)=\"hideOrangeChange($event)\"\n />\n </sky-filter-inline-item>\n </sky-filter-inline>\n</div>\n\n<sky-repeater expandMode=\"none\">\n @for (item of filteredItems; track item) {\n <sky-repeater-item>\n <sky-repeater-item-title>\n {{ item.name }}\n </sky-repeater-item-title>\n </sky-repeater-item>\n }\n</sky-repeater>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "icon", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyFilterModule }, { kind: "component", type: i2$7.λ1, selector: "sky-filter-button", inputs: ["filterButtonId", "ariaControls", "ariaExpanded", "ariaLabel", "active", "disabled", "showButtonText"], outputs: ["filterButtonClick"] }, { kind: "component", type: i2$7.λ2, selector: "sky-filter-inline" }, { kind: "component", type: i2$7.λ3, selector: "sky-filter-inline-item" }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i2$7.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i2$7.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i2$7.λ12, selector: "sky-repeater-item-title" }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i1$5.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i1$5.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i1$5.λ38, selector: "sky-toolbar-section" }] }); }
9016
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: ListsFilterInlineExampleComponent, isStandalone: true, selector: "app-lists-filter-inline-example", ngImport: i0, template: "<sky-toolbar>\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-filter-button\n data-sky-id=\"my-filter-button\"\n [active]=\"filtersActive\"\n [ariaControls]=\"inlineFilters.id\"\n [ariaExpanded]=\"showInlineFilters\"\n [showButtonText]=\"true\"\n (filterButtonClick)=\"filterButtonClicked()\"\n />\n </sky-toolbar-item>\n </sky-toolbar-section>\n</sky-toolbar>\n\n<div #inlineFilters skyId [hidden]=\"!showInlineFilters\">\n <sky-filter-inline data-sky-id=\"filter-inline\">\n <sky-filter-inline-item data-sky-id=\"fruit-filter\">\n <sky-input-box labelText=\"Fruit type\">\n <select [ngModel]=\"fruitType\" (ngModelChange)=\"fruitTypeChange($event)\">\n <option value=\"any\">Any fruit</option>\n <option value=\"citrus\">Citrus</option>\n <option value=\"berry\">Berry</option>\n </select>\n </sky-input-box>\n </sky-filter-inline-item>\n <sky-filter-inline-item data-sky-id=\"hide-orange-filter\">\n <sky-checkbox\n labelText=\"Hide orange fruits\"\n [ngModel]=\"hideOrange\"\n (ngModelChange)=\"hideOrangeChange($event)\"\n />\n </sky-filter-inline-item>\n </sky-filter-inline>\n</div>\n\n<sky-repeater expandMode=\"none\">\n @for (item of filteredItems; track item) {\n <sky-repeater-item>\n <sky-repeater-item-title>\n {{ item.name }}\n </sky-repeater-item-title>\n </sky-repeater-item>\n }\n</sky-repeater>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "icon", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyFilterModule }, { kind: "component", type: i2$7.λ1, selector: "sky-filter-button", inputs: ["filterButtonId", "ariaControls", "ariaExpanded", "ariaLabel", "active", "disabled", "showButtonText"], outputs: ["filterButtonClick"] }, { kind: "component", type: i2$7.λ2, selector: "sky-filter-inline" }, { kind: "component", type: i2$7.λ3, selector: "sky-filter-inline-item" }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i2$7.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i2$7.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i2$7.λ12, selector: "sky-repeater-item-title" }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i1$5.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i1$5.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i1$5.λ38, selector: "sky-toolbar-section" }] }); }
9017
9017
  }
9018
9018
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ListsFilterInlineExampleComponent, decorators: [{
9019
9019
  type: Component,
@@ -9025,7 +9025,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
9025
9025
  SkyInputBoxModule,
9026
9026
  SkyRepeaterModule,
9027
9027
  SkyToolbarModule,
9028
- ], template: "<sky-toolbar>\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-filter-button\n [active]=\"filtersActive\"\n [ariaControls]=\"inlineFilters.id\"\n [ariaExpanded]=\"showInlineFilters\"\n [showButtonText]=\"true\"\n (filterButtonClick)=\"filterButtonClicked()\"\n />\n </sky-toolbar-item>\n </sky-toolbar-section>\n</sky-toolbar>\n\n<div #inlineFilters skyId [hidden]=\"!showInlineFilters\">\n <sky-filter-inline>\n <sky-filter-inline-item>\n <sky-input-box labelText=\"Fruit type\">\n <select [ngModel]=\"fruitType\" (ngModelChange)=\"fruitTypeChange($event)\">\n <option value=\"any\">Any fruit</option>\n <option value=\"citrus\">Citrus</option>\n <option value=\"berry\">Berry</option>\n </select>\n </sky-input-box>\n </sky-filter-inline-item>\n <sky-filter-inline-item>\n <sky-checkbox\n labelText=\"Hide orange fruits\"\n [ngModel]=\"hideOrange\"\n (ngModelChange)=\"hideOrangeChange($event)\"\n />\n </sky-filter-inline-item>\n </sky-filter-inline>\n</div>\n\n<sky-repeater expandMode=\"none\">\n @for (item of filteredItems; track item) {\n <sky-repeater-item>\n <sky-repeater-item-title>\n {{ item.name }}\n </sky-repeater-item-title>\n </sky-repeater-item>\n }\n</sky-repeater>\n" }]
9028
+ ], template: "<sky-toolbar>\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-filter-button\n data-sky-id=\"my-filter-button\"\n [active]=\"filtersActive\"\n [ariaControls]=\"inlineFilters.id\"\n [ariaExpanded]=\"showInlineFilters\"\n [showButtonText]=\"true\"\n (filterButtonClick)=\"filterButtonClicked()\"\n />\n </sky-toolbar-item>\n </sky-toolbar-section>\n</sky-toolbar>\n\n<div #inlineFilters skyId [hidden]=\"!showInlineFilters\">\n <sky-filter-inline data-sky-id=\"filter-inline\">\n <sky-filter-inline-item data-sky-id=\"fruit-filter\">\n <sky-input-box labelText=\"Fruit type\">\n <select [ngModel]=\"fruitType\" (ngModelChange)=\"fruitTypeChange($event)\">\n <option value=\"any\">Any fruit</option>\n <option value=\"citrus\">Citrus</option>\n <option value=\"berry\">Berry</option>\n </select>\n </sky-input-box>\n </sky-filter-inline-item>\n <sky-filter-inline-item data-sky-id=\"hide-orange-filter\">\n <sky-checkbox\n labelText=\"Hide orange fruits\"\n [ngModel]=\"hideOrange\"\n (ngModelChange)=\"hideOrangeChange($event)\"\n />\n </sky-filter-inline-item>\n </sky-filter-inline>\n</div>\n\n<sky-repeater expandMode=\"none\">\n @for (item of filteredItems; track item) {\n <sky-repeater-item>\n <sky-repeater-item-title>\n {{ item.name }}\n </sky-repeater-item-title>\n </sky-repeater-item>\n }\n</sky-repeater>\n" }]
9029
9029
  }], ctorParameters: () => [] });
9030
9030
 
9031
9031
  class FilterModalContext {
@@ -9190,11 +9190,11 @@ class ListsFilterModalExampleComponent {
9190
9190
  return (filter.name === 'hideOrange' && !!filter.value && item.color === 'orange');
9191
9191
  }
9192
9192
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ListsFilterModalExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
9193
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: ListsFilterModalExampleComponent, isStandalone: true, selector: "app-lists-filter-modal-example", ngImport: i0, template: "<sky-toolbar>\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-filter-button\n [showButtonText]=\"true\"\n (filterButtonClick)=\"onModalFilterButtonClick()\"\n />\n </sky-toolbar-item>\n </sky-toolbar-section>\n @if (appliedFilters && appliedFilters.length > 0) {\n <sky-toolbar-section>\n <sky-filter-summary>\n @for (item of appliedFilters; track item; let i = $index) {\n <sky-filter-summary-item (dismiss)=\"onDismiss(i)\">\n {{ item.label }}\n </sky-filter-summary-item>\n }\n </sky-filter-summary>\n </sky-toolbar-section>\n }\n</sky-toolbar>\n<sky-repeater expandMode=\"none\">\n @for (item of filteredItems; track item) {\n <sky-repeater-item>\n <sky-repeater-item-title>\n {{ item.name }}\n </sky-repeater-item-title>\n </sky-repeater-item>\n }\n</sky-repeater>\n", dependencies: [{ kind: "ngmodule", type: SkyFilterModule }, { kind: "component", type: i2$7.λ1, selector: "sky-filter-button", inputs: ["filterButtonId", "ariaControls", "ariaExpanded", "ariaLabel", "active", "disabled", "showButtonText"], outputs: ["filterButtonClick"] }, { kind: "component", type: i2$7.λ5, selector: "sky-filter-summary" }, { kind: "component", type: i2$7.λ4, selector: "sky-filter-summary-item", inputs: ["dismissible"], outputs: ["dismiss", "itemClick"] }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i2$7.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i2$7.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i2$7.λ12, selector: "sky-repeater-item-title" }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i1$5.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i1$5.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i1$5.λ38, selector: "sky-toolbar-section" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
9193
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: ListsFilterModalExampleComponent, isStandalone: true, selector: "app-lists-filter-modal-example", ngImport: i0, template: "<sky-toolbar>\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-filter-button\n data-sky-id=\"my-filter-button\"\n [showButtonText]=\"true\"\n (filterButtonClick)=\"onModalFilterButtonClick()\"\n />\n </sky-toolbar-item>\n </sky-toolbar-section>\n @if (appliedFilters && appliedFilters.length > 0) {\n <sky-toolbar-section>\n <sky-filter-summary data-sky-id=\"filter-summary\">\n @for (item of appliedFilters; track item; let i = $index) {\n <sky-filter-summary-item (dismiss)=\"onDismiss(i)\">\n {{ item.label }}\n </sky-filter-summary-item>\n }\n </sky-filter-summary>\n </sky-toolbar-section>\n }\n</sky-toolbar>\n<sky-repeater expandMode=\"none\">\n @for (item of filteredItems; track item) {\n <sky-repeater-item>\n <sky-repeater-item-title>\n {{ item.name }}\n </sky-repeater-item-title>\n </sky-repeater-item>\n }\n</sky-repeater>\n", dependencies: [{ kind: "ngmodule", type: SkyFilterModule }, { kind: "component", type: i2$7.λ1, selector: "sky-filter-button", inputs: ["filterButtonId", "ariaControls", "ariaExpanded", "ariaLabel", "active", "disabled", "showButtonText"], outputs: ["filterButtonClick"] }, { kind: "component", type: i2$7.λ5, selector: "sky-filter-summary" }, { kind: "component", type: i2$7.λ4, selector: "sky-filter-summary-item", inputs: ["dismissible"], outputs: ["dismiss", "itemClick"] }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i2$7.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i2$7.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i2$7.λ12, selector: "sky-repeater-item-title" }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i1$5.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i1$5.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i1$5.λ38, selector: "sky-toolbar-section" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
9194
9194
  }
9195
9195
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: ListsFilterModalExampleComponent, decorators: [{
9196
9196
  type: Component,
9197
- args: [{ selector: 'app-lists-filter-modal-example', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SkyFilterModule, SkyRepeaterModule, SkyToolbarModule], template: "<sky-toolbar>\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-filter-button\n [showButtonText]=\"true\"\n (filterButtonClick)=\"onModalFilterButtonClick()\"\n />\n </sky-toolbar-item>\n </sky-toolbar-section>\n @if (appliedFilters && appliedFilters.length > 0) {\n <sky-toolbar-section>\n <sky-filter-summary>\n @for (item of appliedFilters; track item; let i = $index) {\n <sky-filter-summary-item (dismiss)=\"onDismiss(i)\">\n {{ item.label }}\n </sky-filter-summary-item>\n }\n </sky-filter-summary>\n </sky-toolbar-section>\n }\n</sky-toolbar>\n<sky-repeater expandMode=\"none\">\n @for (item of filteredItems; track item) {\n <sky-repeater-item>\n <sky-repeater-item-title>\n {{ item.name }}\n </sky-repeater-item-title>\n </sky-repeater-item>\n }\n</sky-repeater>\n" }]
9197
+ args: [{ selector: 'app-lists-filter-modal-example', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SkyFilterModule, SkyRepeaterModule, SkyToolbarModule], template: "<sky-toolbar>\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-filter-button\n data-sky-id=\"my-filter-button\"\n [showButtonText]=\"true\"\n (filterButtonClick)=\"onModalFilterButtonClick()\"\n />\n </sky-toolbar-item>\n </sky-toolbar-section>\n @if (appliedFilters && appliedFilters.length > 0) {\n <sky-toolbar-section>\n <sky-filter-summary data-sky-id=\"filter-summary\">\n @for (item of appliedFilters; track item; let i = $index) {\n <sky-filter-summary-item (dismiss)=\"onDismiss(i)\">\n {{ item.label }}\n </sky-filter-summary-item>\n }\n </sky-filter-summary>\n </sky-toolbar-section>\n }\n</sky-toolbar>\n<sky-repeater expandMode=\"none\">\n @for (item of filteredItems; track item) {\n <sky-repeater-item>\n <sky-repeater-item-title>\n {{ item.name }}\n </sky-repeater-item-title>\n </sky-repeater-item>\n }\n</sky-repeater>\n" }]
9198
9198
  }], ctorParameters: () => [] });
9199
9199
 
9200
9200
  const people$7 = [