@ojiepermana/angular 21.2.2 → 21.3.0
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.
- package/README.md +119 -23
- package/fesm2022/ojiepermana-angular-layout-theme.mjs +581 -0
- package/fesm2022/ojiepermana-angular-layout-theme.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-layout.mjs +2 -1
- package/fesm2022/ojiepermana-angular-layout.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-navigation-icon.mjs +59 -0
- package/fesm2022/ojiepermana-angular-navigation-icon.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-navigation.mjs +6 -58
- package/fesm2022/ojiepermana-angular-navigation.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-theme.mjs +1 -1
- package/fesm2022/ojiepermana-angular-theme.mjs.map +1 -1
- package/fesm2022/ojiepermana-angular-ui-component-accordion.mjs +174 -0
- package/fesm2022/ojiepermana-angular-ui-component-accordion.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-alert-dialog.mjs +242 -0
- package/fesm2022/ojiepermana-angular-ui-component-alert-dialog.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-alert.mjs +90 -0
- package/fesm2022/ojiepermana-angular-ui-component-alert.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-aspect-ratio.mjs +33 -0
- package/fesm2022/ojiepermana-angular-ui-component-aspect-ratio.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-avatar.mjs +123 -0
- package/fesm2022/ojiepermana-angular-ui-component-avatar.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-badge.mjs +47 -0
- package/fesm2022/ojiepermana-angular-ui-component-badge.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-breadcrumb.mjs +186 -0
- package/fesm2022/ojiepermana-angular-ui-component-breadcrumb.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-button-group.mjs +95 -0
- package/fesm2022/ojiepermana-angular-ui-component-button-group.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-button.mjs +64 -0
- package/fesm2022/ojiepermana-angular-ui-component-button.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-calendar.mjs +78 -0
- package/fesm2022/ojiepermana-angular-ui-component-calendar.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-card.mjs +137 -0
- package/fesm2022/ojiepermana-angular-ui-component-card.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-carousel.mjs +310 -0
- package/fesm2022/ojiepermana-angular-ui-component-carousel.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-chart-area.mjs +6 -0
- package/fesm2022/ojiepermana-angular-ui-component-chart-area.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-chart-bar.mjs +6 -0
- package/fesm2022/ojiepermana-angular-ui-component-chart-bar.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-chart-line.mjs +6 -0
- package/fesm2022/ojiepermana-angular-ui-component-chart-line.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-chart-pie.mjs +6 -0
- package/fesm2022/ojiepermana-angular-ui-component-chart-pie.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-chart-radar.mjs +6 -0
- package/fesm2022/ojiepermana-angular-ui-component-chart-radar.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-chart-radial.mjs +6 -0
- package/fesm2022/ojiepermana-angular-ui-component-chart-radial.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-chart-scatter.mjs +6 -0
- package/fesm2022/ojiepermana-angular-ui-component-chart-scatter.mjs.map +1 -0
- package/fesm2022/{ojiepermana-angular-chart.mjs → ojiepermana-angular-ui-component-chart.mjs} +2 -2
- package/fesm2022/ojiepermana-angular-ui-component-chart.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-checkbox.mjs +104 -0
- package/fesm2022/ojiepermana-angular-ui-component-checkbox.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-collapsible.mjs +116 -0
- package/fesm2022/ojiepermana-angular-ui-component-collapsible.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-combobox.mjs +263 -0
- package/fesm2022/ojiepermana-angular-ui-component-combobox.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-command.mjs +268 -0
- package/fesm2022/ojiepermana-angular-ui-component-command.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-context-menu.mjs +100 -0
- package/fesm2022/ojiepermana-angular-ui-component-context-menu.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-date-picker.mjs +155 -0
- package/fesm2022/ojiepermana-angular-ui-component-date-picker.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-dialog.mjs +262 -0
- package/fesm2022/ojiepermana-angular-ui-component-dialog.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-drawer.mjs +6 -0
- package/fesm2022/ojiepermana-angular-ui-component-drawer.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-dropdown-menu.mjs +458 -0
- package/fesm2022/ojiepermana-angular-ui-component-dropdown-menu.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-form.mjs +208 -0
- package/fesm2022/ojiepermana-angular-ui-component-form.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-input-group.mjs +164 -0
- package/fesm2022/ojiepermana-angular-ui-component-input-group.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-input.mjs +43 -0
- package/fesm2022/ojiepermana-angular-ui-component-input.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-item.mjs +241 -0
- package/fesm2022/ojiepermana-angular-ui-component-item.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-label.mjs +30 -0
- package/fesm2022/ojiepermana-angular-ui-component-label.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-pagination.mjs +192 -0
- package/fesm2022/ojiepermana-angular-ui-component-pagination.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-popover.mjs +163 -0
- package/fesm2022/ojiepermana-angular-ui-component-popover.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-progress.mjs +53 -0
- package/fesm2022/ojiepermana-angular-ui-component-progress.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-radio.mjs +92 -0
- package/fesm2022/ojiepermana-angular-ui-component-radio.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-scroll-area.mjs +48 -0
- package/fesm2022/ojiepermana-angular-ui-component-scroll-area.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-select.mjs +131 -0
- package/fesm2022/ojiepermana-angular-ui-component-select.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-separator.mjs +33 -0
- package/fesm2022/ojiepermana-angular-ui-component-separator.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-sheet.mjs +235 -0
- package/fesm2022/ojiepermana-angular-ui-component-sheet.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-skeleton.mjs +29 -0
- package/fesm2022/ojiepermana-angular-ui-component-skeleton.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-slider.mjs +29 -0
- package/fesm2022/ojiepermana-angular-ui-component-slider.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-switch.mjs +84 -0
- package/fesm2022/ojiepermana-angular-ui-component-switch.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-table.mjs +139 -0
- package/fesm2022/ojiepermana-angular-ui-component-table.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-tabs.mjs +252 -0
- package/fesm2022/ojiepermana-angular-ui-component-tabs.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-textarea.mjs +37 -0
- package/fesm2022/ojiepermana-angular-ui-component-textarea.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-toast.mjs +47 -0
- package/fesm2022/ojiepermana-angular-ui-component-toast.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-tooltip.mjs +56 -0
- package/fesm2022/ojiepermana-angular-ui-component-tooltip.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular-ui-component-utils.mjs +13 -0
- package/fesm2022/ojiepermana-angular-ui-component-utils.mjs.map +1 -0
- package/fesm2022/ojiepermana-angular.mjs +5 -3
- package/fesm2022/ojiepermana-angular.mjs.map +1 -1
- package/layout/theme/package.json +4 -0
- package/navigation-icon/package.json +4 -0
- package/package.json +212 -12
- package/types/ojiepermana-angular-layout-theme.d.ts +205 -0
- package/types/ojiepermana-angular-layout.d.ts +1 -1
- package/types/ojiepermana-angular-navigation-icon.d.ts +17 -0
- package/types/ojiepermana-angular-navigation.d.ts +2 -20
- package/types/ojiepermana-angular-ui-component-accordion.d.ts +51 -0
- package/types/ojiepermana-angular-ui-component-alert-dialog.d.ts +93 -0
- package/types/ojiepermana-angular-ui-component-alert.d.ts +37 -0
- package/types/ojiepermana-angular-ui-component-aspect-ratio.d.ts +12 -0
- package/types/ojiepermana-angular-ui-component-avatar.d.ts +51 -0
- package/types/ojiepermana-angular-ui-component-badge.d.ts +19 -0
- package/types/ojiepermana-angular-ui-component-breadcrumb.d.ts +46 -0
- package/types/ojiepermana-angular-ui-component-button-group.d.ts +26 -0
- package/types/ojiepermana-angular-ui-component-button.d.ts +22 -0
- package/types/ojiepermana-angular-ui-component-calendar.d.ts +33 -0
- package/types/ojiepermana-angular-ui-component-card.d.ts +60 -0
- package/types/ojiepermana-angular-ui-component-carousel.d.ts +86 -0
- package/types/ojiepermana-angular-ui-component-chart-area.d.ts +1 -0
- package/types/ojiepermana-angular-ui-component-chart-bar.d.ts +1 -0
- package/types/ojiepermana-angular-ui-component-chart-line.d.ts +1 -0
- package/types/ojiepermana-angular-ui-component-chart-pie.d.ts +1 -0
- package/types/ojiepermana-angular-ui-component-chart-radar.d.ts +1 -0
- package/types/ojiepermana-angular-ui-component-chart-radial.d.ts +1 -0
- package/types/ojiepermana-angular-ui-component-chart-scatter.d.ts +1 -0
- package/types/{ojiepermana-angular-chart.d.ts → ojiepermana-angular-ui-component-chart.d.ts} +15 -15
- package/types/ojiepermana-angular-ui-component-checkbox.d.ts +35 -0
- package/types/ojiepermana-angular-ui-component-collapsible.d.ts +42 -0
- package/types/ojiepermana-angular-ui-component-combobox.d.ts +51 -0
- package/types/ojiepermana-angular-ui-component-command.d.ts +99 -0
- package/types/ojiepermana-angular-ui-component-context-menu.d.ts +35 -0
- package/types/ojiepermana-angular-ui-component-date-picker.d.ts +41 -0
- package/types/ojiepermana-angular-ui-component-dialog.d.ts +87 -0
- package/types/ojiepermana-angular-ui-component-drawer.d.ts +1 -0
- package/types/ojiepermana-angular-ui-component-dropdown-menu.d.ts +135 -0
- package/types/ojiepermana-angular-ui-component-form.d.ts +92 -0
- package/types/ojiepermana-angular-ui-component-input-group.d.ts +51 -0
- package/types/ojiepermana-angular-ui-component-input.d.ts +16 -0
- package/types/ojiepermana-angular-ui-component-item.d.ts +88 -0
- package/types/ojiepermana-angular-ui-component-label.d.ts +11 -0
- package/types/ojiepermana-angular-ui-component-pagination.d.ts +27 -0
- package/types/ojiepermana-angular-ui-component-popover.d.ts +43 -0
- package/types/ojiepermana-angular-ui-component-progress.d.ts +17 -0
- package/types/ojiepermana-angular-ui-component-radio.d.ts +34 -0
- package/types/ojiepermana-angular-ui-component-scroll-area.d.ts +19 -0
- package/types/ojiepermana-angular-ui-component-select.d.ts +45 -0
- package/types/ojiepermana-angular-ui-component-separator.d.ts +14 -0
- package/types/ojiepermana-angular-ui-component-sheet.d.ts +74 -0
- package/types/ojiepermana-angular-ui-component-skeleton.d.ts +10 -0
- package/types/ojiepermana-angular-ui-component-slider.d.ts +16 -0
- package/types/ojiepermana-angular-ui-component-switch.d.ts +30 -0
- package/types/ojiepermana-angular-ui-component-table.d.ts +52 -0
- package/types/ojiepermana-angular-ui-component-tabs.d.ts +92 -0
- package/types/ojiepermana-angular-ui-component-textarea.d.ts +12 -0
- package/types/ojiepermana-angular-ui-component-toast.d.ts +29 -0
- package/types/ojiepermana-angular-ui-component-tooltip.d.ts +22 -0
- package/types/ojiepermana-angular-ui-component-utils.d.ts +5 -0
- package/ui/component/accordion/package.json +4 -0
- package/ui/component/alert/package.json +4 -0
- package/ui/component/alert-dialog/package.json +4 -0
- package/ui/component/aspect-ratio/package.json +4 -0
- package/ui/component/avatar/package.json +4 -0
- package/ui/component/badge/package.json +4 -0
- package/ui/component/breadcrumb/package.json +4 -0
- package/ui/component/button/package.json +4 -0
- package/ui/component/button-group/package.json +4 -0
- package/ui/component/calendar/package.json +4 -0
- package/ui/component/card/package.json +4 -0
- package/ui/component/carousel/package.json +4 -0
- package/ui/component/chart/README.md +249 -0
- package/ui/component/chart/area/package.json +4 -0
- package/ui/component/chart/bar/package.json +4 -0
- package/ui/component/chart/line/package.json +4 -0
- package/ui/component/chart/package.json +4 -0
- package/ui/component/chart/pie/package.json +4 -0
- package/ui/component/chart/radar/package.json +4 -0
- package/ui/component/chart/radial/package.json +4 -0
- package/ui/component/chart/scatter/package.json +4 -0
- package/ui/component/checkbox/package.json +4 -0
- package/ui/component/collapsible/package.json +4 -0
- package/ui/component/combobox/package.json +4 -0
- package/ui/component/command/package.json +4 -0
- package/ui/component/context-menu/package.json +4 -0
- package/ui/component/date-picker/package.json +4 -0
- package/ui/component/dialog/package.json +4 -0
- package/ui/component/drawer/package.json +4 -0
- package/ui/component/dropdown-menu/package.json +4 -0
- package/ui/component/form/package.json +4 -0
- package/ui/component/input/package.json +4 -0
- package/ui/component/input-group/package.json +4 -0
- package/ui/component/item/package.json +4 -0
- package/ui/component/label/package.json +4 -0
- package/ui/component/pagination/package.json +4 -0
- package/ui/component/popover/package.json +4 -0
- package/ui/component/progress/package.json +4 -0
- package/ui/component/radio/package.json +4 -0
- package/ui/component/scroll-area/package.json +4 -0
- package/ui/component/select/package.json +4 -0
- package/ui/component/separator/package.json +4 -0
- package/ui/component/sheet/package.json +4 -0
- package/ui/component/skeleton/package.json +4 -0
- package/ui/component/slider/package.json +4 -0
- package/ui/component/switch/package.json +4 -0
- package/ui/component/table/package.json +4 -0
- package/ui/component/tabs/package.json +4 -0
- package/ui/component/textarea/package.json +4 -0
- package/ui/component/toast/package.json +4 -0
- package/ui/component/tooltip/package.json +4 -0
- package/ui/component/utils/package.json +4 -0
- package/chart/README.md +0 -0
- package/chart/package.json +0 -4
- package/component/package.json +0 -4
- package/fesm2022/ojiepermana-angular-chart.mjs.map +0 -1
- package/fesm2022/ojiepermana-angular-component.mjs +0 -5774
- package/fesm2022/ojiepermana-angular-component.mjs.map +0 -1
- package/types/ojiepermana-angular-component.d.ts +0 -1927
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ojiepermana-angular-ui-component-select.mjs","sources":["../../../projects/angular/ui/component/select/src/lib/select.component.ts","../../../projects/angular/ui/component/select/src/lib/option.component.ts","../../../projects/angular/ui/component/select/ojiepermana-angular-ui-component-select.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n computed,\n forwardRef,\n input,\n output,\n signal,\n viewChild,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { MatFormField } from '@angular/material/form-field';\nimport { MatSelect, MatSelectChange } from '@angular/material/select';\nimport { cn } from '@ojiepermana/angular/component/utils';\n\n@Component({\n selector: 'ui-select',\n imports: [MatFormField, MatSelect],\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SelectComponent), multi: true }],\n template: `\n <mat-form-field [class]=\"classes()\" subscriptSizing=\"dynamic\">\n <mat-select\n #ref\n disableRipple\n panelClass=\"ui-select-panel\"\n [value]=\"value()\"\n [disabled]=\"disabled()\"\n [multiple]=\"multiple()\"\n [placeholder]=\"placeholder()\"\n [required]=\"required()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledby()\"\n (selectionChange)=\"handleChange($event)\"\n (openedChange)=\"openedChange.emit($event)\">\n <ng-content />\n </mat-select>\n </mat-form-field>\n `,\n styleUrl: './select.component.css',\n})\nexport class SelectComponent implements ControlValueAccessor {\n readonly placeholder = input<string>('');\n readonly multiple = input<boolean>(false);\n readonly required = input<boolean>(false);\n readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });\n readonly ariaLabelledby = input<string | null>(null, { alias: 'aria-labelledby' });\n readonly class = input<string>('');\n\n readonly valueChange = output<unknown>();\n readonly openedChange = output<boolean>();\n\n private readonly ref = viewChild.required<MatSelect>('ref');\n\n protected readonly value = signal<unknown>(null);\n protected readonly disabled = signal<boolean>(false);\n protected readonly classes = computed(() => cn('ui-select-field w-full', this.class()));\n\n private onChange: (v: unknown) => void = () => {};\n private onTouched: () => void = () => {};\n\n protected handleChange(e: MatSelectChange): void {\n this.value.set(e.value);\n this.onChange(e.value);\n this.onTouched();\n this.valueChange.emit(e.value);\n }\n\n open(): void {\n this.ref().open();\n }\n\n close(): void {\n this.ref().close();\n }\n\n focus(): void {\n this.ref().focus();\n }\n\n writeValue(v: unknown): void {\n this.value.set(v);\n }\n registerOnChange(fn: (v: unknown) => void): void {\n this.onChange = fn;\n }\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n setDisabledState(d: boolean): void {\n this.disabled.set(d);\n }\n}\n","import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { MatOption } from '@angular/material/core';\nimport { cn } from '@ojiepermana/angular/component/utils';\n\n/**\n * Option for `<ui-select>`. Wraps `mat-option` so the underlying `mat-select`\n * can still discover it via `@ContentChildren(MatOption, { descendants: true })`.\n */\n@Component({\n selector: 'ui-option',\n imports: [MatOption],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { '[class]': 'classes()' },\n template: `\n <mat-option [value]=\"value()\" [disabled]=\"disabled()\">\n <ng-content />\n </mat-option>\n `,\n})\nexport class OptionComponent {\n readonly value = input.required<unknown>();\n readonly disabled = input<boolean>(false);\n readonly class = input<string>('');\n\n protected readonly classes = computed(() => cn('contents', this.class()));\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;MAyCa,eAAe,CAAA;AACjB,IAAA,WAAW,GAAG,KAAK,CAAS,EAAE,kFAAC;AAC/B,IAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC;AAChC,IAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC;IAChC,SAAS,GAAG,KAAK,CAAgB,IAAI,iFAAI,KAAK,EAAE,YAAY,EAAA,CAAG;IAC/D,cAAc,GAAG,KAAK,CAAgB,IAAI,sFAAI,KAAK,EAAE,iBAAiB,EAAA,CAAG;AACzE,IAAA,KAAK,GAAG,KAAK,CAAS,EAAE,4EAAC;IAEzB,WAAW,GAAG,MAAM,EAAW;IAC/B,YAAY,GAAG,MAAM,EAAW;AAExB,IAAA,GAAG,GAAG,SAAS,CAAC,QAAQ,CAAY,KAAK,CAAC;AAExC,IAAA,KAAK,GAAG,MAAM,CAAU,IAAI,4EAAC;AAC7B,IAAA,QAAQ,GAAG,MAAM,CAAU,KAAK,+EAAC;AACjC,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,wBAAwB,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,8EAAC;AAE/E,IAAA,QAAQ,GAAyB,MAAK,EAAE,CAAC;AACzC,IAAA,SAAS,GAAe,MAAK,EAAE,CAAC;AAE9B,IAAA,YAAY,CAAC,CAAkB,EAAA;QACvC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC;AACvB,QAAA,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;QACtB,IAAI,CAAC,SAAS,EAAE;QAChB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAChC;IAEA,IAAI,GAAA;AACF,QAAA,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,EAAE;IACnB;IAEA,KAAK,GAAA;AACH,QAAA,IAAI,CAAC,GAAG,EAAE,CAAC,KAAK,EAAE;IACpB;IAEA,KAAK,GAAA;AACH,QAAA,IAAI,CAAC,GAAG,EAAE,CAAC,KAAK,EAAE;IACpB;AAEA,IAAA,UAAU,CAAC,CAAU,EAAA;AACnB,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;IACnB;AACA,IAAA,gBAAgB,CAAC,EAAwB,EAAA;AACvC,QAAA,IAAI,CAAC,QAAQ,GAAG,EAAE;IACpB;AACA,IAAA,iBAAiB,CAAC,EAAc,EAAA;AAC9B,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;IACrB;AACA,IAAA,gBAAgB,CAAC,CAAU,EAAA;AACzB,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;IACtB;wGAlDW,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAf,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,YAAA,EAAA,cAAA,EAAA,EAAA,SAAA,EAtBf,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,UAAU,CAAC,MAAM,eAAe,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,KAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,KAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAC9F;;;;;;;;;;;;;;;;;;GAkBT,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,2wDAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EArBS,YAAY,4LAAE,SAAS,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,kBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,eAAA,EAAA,UAAA,EAAA,8BAAA,EAAA,aAAA,EAAA,UAAA,EAAA,UAAA,EAAA,wBAAA,EAAA,aAAA,EAAA,OAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,2BAAA,EAAA,gBAAA,EAAA,IAAA,EAAA,YAAA,EAAA,0BAAA,CAAA,EAAA,OAAA,EAAA,CAAA,cAAA,EAAA,QAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,aAAA,CAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAwBtB,eAAe,EAAA,UAAA,EAAA,CAAA;kBA1B3B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,EAAA,OAAA,EACZ,CAAC,YAAY,EAAE,SAAS,CAAC,EAAA,eAAA,EACjB,uBAAuB,CAAC,MAAM,EAAA,SAAA,EACpC,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,UAAU,CAAC,MAAK,eAAgB,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EAAA,QAAA,EAC9F;;;;;;;;;;;;;;;;;;AAkBT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,2wDAAA,CAAA,EAAA;ywBAcoD,KAAK,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AChD5D;;;AAGG;MAYU,eAAe,CAAA;AACjB,IAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,2EAAW;AACjC,IAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC;AAChC,IAAA,KAAK,GAAG,KAAK,CAAS,EAAE,4EAAC;AAEf,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,UAAU,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,8EAAC;wGAL9D,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAf,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,WAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EANhB;;;;AAIT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAPS,SAAS,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,IAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FASR,eAAe,EAAA,UAAA,EAAA,CAAA;kBAX3B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,WAAW;oBACrB,OAAO,EAAE,CAAC,SAAS,CAAC;oBACpB,eAAe,EAAE,uBAAuB,CAAC,MAAM;AAC/C,oBAAA,IAAI,EAAE,EAAE,SAAS,EAAE,WAAW,EAAE;AAChC,oBAAA,QAAQ,EAAE;;;;AAIT,EAAA,CAAA;AACF,iBAAA;;;AClBD;;AAEG;;;;"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import { cn } from '@ojiepermana/angular/component/utils';
|
|
4
|
+
|
|
5
|
+
class SeparatorComponent {
|
|
6
|
+
orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
|
|
7
|
+
decorative = input(true, ...(ngDevMode ? [{ debugName: "decorative" }] : /* istanbul ignore next */ []));
|
|
8
|
+
class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
9
|
+
classes = computed(() => cn('shrink-0 bg-border', this.orientation() === 'horizontal' ? 'h-px w-full' : 'h-full w-px', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
10
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: SeparatorComponent, isStandalone: true, selector: "ui-separator", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.role": "decorative() ? \"none\" : \"separator\"", "attr.aria-orientation": "decorative() ? null : orientation()", "attr.data-orientation": "orientation()" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
12
|
+
}
|
|
13
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SeparatorComponent, decorators: [{
|
|
14
|
+
type: Component,
|
|
15
|
+
args: [{
|
|
16
|
+
selector: 'ui-separator',
|
|
17
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
18
|
+
host: {
|
|
19
|
+
'[class]': 'classes()',
|
|
20
|
+
'[attr.role]': 'decorative() ? "none" : "separator"',
|
|
21
|
+
'[attr.aria-orientation]': 'decorative() ? null : orientation()',
|
|
22
|
+
'[attr.data-orientation]': 'orientation()',
|
|
23
|
+
},
|
|
24
|
+
template: '',
|
|
25
|
+
}]
|
|
26
|
+
}], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], decorative: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorative", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
27
|
+
|
|
28
|
+
/**
|
|
29
|
+
* Generated bundle index. Do not edit.
|
|
30
|
+
*/
|
|
31
|
+
|
|
32
|
+
export { SeparatorComponent };
|
|
33
|
+
//# sourceMappingURL=ojiepermana-angular-ui-component-separator.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ojiepermana-angular-ui-component-separator.mjs","sources":["../../../projects/angular/ui/component/separator/src/lib/separator.component.ts","../../../projects/angular/ui/component/separator/ojiepermana-angular-ui-component-separator.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { cn } from '@ojiepermana/angular/component/utils';\n\nexport type SeparatorOrientation = 'horizontal' | 'vertical';\n\n@Component({\n selector: 'ui-separator',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[class]': 'classes()',\n '[attr.role]': 'decorative() ? \"none\" : \"separator\"',\n '[attr.aria-orientation]': 'decorative() ? null : orientation()',\n '[attr.data-orientation]': 'orientation()',\n },\n template: '',\n})\nexport class SeparatorComponent {\n readonly orientation = input<SeparatorOrientation>('horizontal');\n readonly decorative = input<boolean>(true);\n readonly class = input<string>('');\n\n protected readonly classes = computed(() =>\n cn('shrink-0 bg-border', this.orientation() === 'horizontal' ? 'h-px w-full' : 'h-full w-px', this.class()),\n );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MAgBa,kBAAkB,CAAA;AACpB,IAAA,WAAW,GAAG,KAAK,CAAuB,YAAY,kFAAC;AACvD,IAAA,UAAU,GAAG,KAAK,CAAU,IAAI,iFAAC;AACjC,IAAA,KAAK,GAAG,KAAK,CAAS,EAAE,4EAAC;AAEf,IAAA,OAAO,GAAG,QAAQ,CAAC,MACpC,EAAE,CAAC,oBAAoB,EAAE,IAAI,CAAC,WAAW,EAAE,KAAK,YAAY,GAAG,aAAa,GAAG,aAAa,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,8EAC5G;wGAPU,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,kBAAkB,+qBAFnB,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAED,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAX9B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,cAAc;oBACxB,eAAe,EAAE,uBAAuB,CAAC,MAAM;AAC/C,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE,WAAW;AACtB,wBAAA,aAAa,EAAE,qCAAqC;AACpD,wBAAA,yBAAyB,EAAE,qCAAqC;AAChE,wBAAA,yBAAyB,EAAE,eAAe;AAC3C,qBAAA;AACD,oBAAA,QAAQ,EAAE,EAAE;AACb,iBAAA;;;ACfD;;AAEG;;;;"}
|
|
@@ -0,0 +1,235 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { inject, ViewContainerRef, DestroyRef, ElementRef, model, input, output, viewChild, computed, effect, ChangeDetectionStrategy, Component, Directive } from '@angular/core';
|
|
3
|
+
import { Overlay } from '@angular/cdk/overlay';
|
|
4
|
+
import { TemplatePortal } from '@angular/cdk/portal';
|
|
5
|
+
import { FocusTrapFactory } from '@angular/cdk/a11y';
|
|
6
|
+
import { DOCUMENT } from '@angular/common';
|
|
7
|
+
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
8
|
+
import { filter } from 'rxjs/operators';
|
|
9
|
+
import { cn } from '@ojiepermana/angular/component/utils';
|
|
10
|
+
|
|
11
|
+
const SIDE_BASE = {
|
|
12
|
+
top: 'inset-x-0 top-0 border-b border-border',
|
|
13
|
+
bottom: 'inset-x-0 bottom-0 border-t border-border',
|
|
14
|
+
left: 'inset-y-0 left-0 h-full w-3/4 border-r border-border sm:max-w-sm',
|
|
15
|
+
right: 'inset-y-0 right-0 h-full w-3/4 border-l border-border sm:max-w-sm',
|
|
16
|
+
};
|
|
17
|
+
const DRAWER_SIDE_CLASSES = {
|
|
18
|
+
top: 'max-h-[85vh] rounded-b-lg',
|
|
19
|
+
bottom: 'max-h-[85vh] rounded-t-lg',
|
|
20
|
+
left: 'rounded-r-lg',
|
|
21
|
+
right: 'rounded-l-lg',
|
|
22
|
+
};
|
|
23
|
+
const SIDE_ENTER_FROM = {
|
|
24
|
+
top: 'translateY(-100%)',
|
|
25
|
+
bottom: 'translateY(100%)',
|
|
26
|
+
left: 'translateX(-100%)',
|
|
27
|
+
right: 'translateX(100%)',
|
|
28
|
+
};
|
|
29
|
+
class SheetComponent {
|
|
30
|
+
overlay = inject(Overlay);
|
|
31
|
+
vcr = inject(ViewContainerRef);
|
|
32
|
+
trapFactory = inject(FocusTrapFactory);
|
|
33
|
+
doc = inject(DOCUMENT);
|
|
34
|
+
destroyRef = inject(DestroyRef);
|
|
35
|
+
host = inject((ElementRef));
|
|
36
|
+
open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
|
|
37
|
+
side = input(undefined, ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
|
|
38
|
+
closeOnEscape = input(true, ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : /* istanbul ignore next */ []));
|
|
39
|
+
closeOnBackdropClick = input(true, ...(ngDevMode ? [{ debugName: "closeOnBackdropClick" }] : /* istanbul ignore next */ []));
|
|
40
|
+
labelledBy = input(null, { ...(ngDevMode ? { debugName: "labelledBy" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
|
|
41
|
+
describedBy = input(null, { ...(ngDevMode ? { debugName: "describedBy" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
|
|
42
|
+
class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
43
|
+
openedChange = output();
|
|
44
|
+
tpl = viewChild.required('tpl');
|
|
45
|
+
overlayRef = null;
|
|
46
|
+
focusTrap = null;
|
|
47
|
+
previousFocus = null;
|
|
48
|
+
resolvedSide = computed(() => this.side() ?? (this.isDrawerHost() ? 'bottom' : 'right'), ...(ngDevMode ? [{ debugName: "resolvedSide" }] : /* istanbul ignore next */ []));
|
|
49
|
+
surfaceClasses = computed(() => cn('gap-4 p-6 flex flex-col', SIDE_BASE[this.resolvedSide()], this.isDrawerHost() ? DRAWER_SIDE_CLASSES[this.resolvedSide()] : '', this.class()), ...(ngDevMode ? [{ debugName: "surfaceClasses" }] : /* istanbul ignore next */ []));
|
|
50
|
+
enterFrom = computed(() => SIDE_ENTER_FROM[this.resolvedSide()], ...(ngDevMode ? [{ debugName: "enterFrom" }] : /* istanbul ignore next */ []));
|
|
51
|
+
constructor() {
|
|
52
|
+
effect(() => {
|
|
53
|
+
this.open() ? this.attach() : this.detach();
|
|
54
|
+
});
|
|
55
|
+
}
|
|
56
|
+
attach() {
|
|
57
|
+
if (this.overlayRef)
|
|
58
|
+
return;
|
|
59
|
+
this.previousFocus = this.doc.activeElement;
|
|
60
|
+
this.overlayRef = this.overlay.create({
|
|
61
|
+
hasBackdrop: true,
|
|
62
|
+
backdropClass: 'ui-dialog-backdrop',
|
|
63
|
+
panelClass: 'ui-sheet-panel',
|
|
64
|
+
scrollStrategy: this.overlay.scrollStrategies.block(),
|
|
65
|
+
positionStrategy: this.overlay.position().global(),
|
|
66
|
+
});
|
|
67
|
+
const portal = new TemplatePortal(this.tpl(), this.vcr);
|
|
68
|
+
this.overlayRef.attach(portal);
|
|
69
|
+
this.focusTrap = this.trapFactory.create(this.overlayRef.hostElement);
|
|
70
|
+
this.focusTrap.focusInitialElementWhenReady();
|
|
71
|
+
if (this.closeOnBackdropClick()) {
|
|
72
|
+
this.overlayRef
|
|
73
|
+
.backdropClick()
|
|
74
|
+
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
75
|
+
.subscribe(() => this.open.set(false));
|
|
76
|
+
}
|
|
77
|
+
this.overlayRef
|
|
78
|
+
.keydownEvents()
|
|
79
|
+
.pipe(takeUntilDestroyed(this.destroyRef), filter((e) => e.key === 'Escape' && this.closeOnEscape()))
|
|
80
|
+
.subscribe((e) => {
|
|
81
|
+
e.preventDefault();
|
|
82
|
+
this.open.set(false);
|
|
83
|
+
});
|
|
84
|
+
this.openedChange.emit(true);
|
|
85
|
+
}
|
|
86
|
+
detach() {
|
|
87
|
+
if (!this.overlayRef)
|
|
88
|
+
return;
|
|
89
|
+
this.focusTrap?.destroy();
|
|
90
|
+
this.focusTrap = null;
|
|
91
|
+
this.overlayRef.dispose();
|
|
92
|
+
this.overlayRef = null;
|
|
93
|
+
this.previousFocus?.focus?.();
|
|
94
|
+
this.openedChange.emit(false);
|
|
95
|
+
}
|
|
96
|
+
close() {
|
|
97
|
+
this.open.set(false);
|
|
98
|
+
}
|
|
99
|
+
isDrawerHost() {
|
|
100
|
+
return this.host.nativeElement.localName === 'ui-drawer';
|
|
101
|
+
}
|
|
102
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
103
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.14", type: SheetComponent, isStandalone: true, selector: "ui-sheet, ui-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, labelledBy: { classPropertyName: "labelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", openedChange: "openedChange" }, viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
104
|
+
<ng-template #tpl>
|
|
105
|
+
<div
|
|
106
|
+
class="ui-sheet-surface fixed z-50 bg-background shadow-lg transition ease-in-out"
|
|
107
|
+
role="dialog"
|
|
108
|
+
aria-modal="true"
|
|
109
|
+
[attr.aria-labelledby]="labelledBy()"
|
|
110
|
+
[attr.aria-describedby]="describedBy()"
|
|
111
|
+
[class]="surfaceClasses()"
|
|
112
|
+
[style.--ui-sheet-from]="enterFrom()">
|
|
113
|
+
<ng-content />
|
|
114
|
+
</div>
|
|
115
|
+
</ng-template>
|
|
116
|
+
`, isInline: true, styles: [".ui-sheet-surface{animation:ui-sheet-in .3s cubic-bezier(.2,0,0,1)}@keyframes ui-sheet-in{0%{transform:var(--ui-sheet-from)}to{transform:translate(0)}}@media(prefers-reduced-motion:reduce){.ui-sheet-surface{animation-duration:0ms}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
117
|
+
}
|
|
118
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SheetComponent, decorators: [{
|
|
119
|
+
type: Component,
|
|
120
|
+
args: [{ selector: 'ui-sheet, ui-drawer', changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
121
|
+
<ng-template #tpl>
|
|
122
|
+
<div
|
|
123
|
+
class="ui-sheet-surface fixed z-50 bg-background shadow-lg transition ease-in-out"
|
|
124
|
+
role="dialog"
|
|
125
|
+
aria-modal="true"
|
|
126
|
+
[attr.aria-labelledby]="labelledBy()"
|
|
127
|
+
[attr.aria-describedby]="describedBy()"
|
|
128
|
+
[class]="surfaceClasses()"
|
|
129
|
+
[style.--ui-sheet-from]="enterFrom()">
|
|
130
|
+
<ng-content />
|
|
131
|
+
</div>
|
|
132
|
+
</ng-template>
|
|
133
|
+
`, styles: [".ui-sheet-surface{animation:ui-sheet-in .3s cubic-bezier(.2,0,0,1)}@keyframes ui-sheet-in{0%{transform:var(--ui-sheet-from)}to{transform:translate(0)}}@media(prefers-reduced-motion:reduce){.ui-sheet-surface{animation-duration:0ms}}\n"] }]
|
|
134
|
+
}], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], labelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], tpl: [{ type: i0.ViewChild, args: ['tpl', { isSignal: true }] }] } });
|
|
135
|
+
|
|
136
|
+
class SheetCloseDirective {
|
|
137
|
+
sheet = inject(SheetComponent);
|
|
138
|
+
closeSheet() {
|
|
139
|
+
this.sheet.close();
|
|
140
|
+
}
|
|
141
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SheetCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
142
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: SheetCloseDirective, isStandalone: true, selector: "button[ui-sheet-close], a[ui-sheet-close], button[ui-drawer-close], a[ui-drawer-close]", host: { listeners: { "click": "closeSheet()" } }, ngImport: i0 });
|
|
143
|
+
}
|
|
144
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SheetCloseDirective, decorators: [{
|
|
145
|
+
type: Directive,
|
|
146
|
+
args: [{
|
|
147
|
+
selector: 'button[ui-sheet-close], a[ui-sheet-close], button[ui-drawer-close], a[ui-drawer-close]',
|
|
148
|
+
host: {
|
|
149
|
+
'(click)': 'closeSheet()',
|
|
150
|
+
},
|
|
151
|
+
}]
|
|
152
|
+
}] });
|
|
153
|
+
|
|
154
|
+
class SheetHeaderComponent {
|
|
155
|
+
class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
156
|
+
classes = computed(() => cn('flex flex-col gap-2 text-center sm:text-left', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
157
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SheetHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
158
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: SheetHeaderComponent, isStandalone: true, selector: "ui-sheet-header, ui-drawer-header", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
159
|
+
}
|
|
160
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SheetHeaderComponent, decorators: [{
|
|
161
|
+
type: Component,
|
|
162
|
+
args: [{
|
|
163
|
+
selector: 'ui-sheet-header, ui-drawer-header',
|
|
164
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
165
|
+
host: { '[class]': 'classes()' },
|
|
166
|
+
template: `<ng-content />`,
|
|
167
|
+
}]
|
|
168
|
+
}], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
169
|
+
class SheetTitleComponent {
|
|
170
|
+
class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
171
|
+
classes = computed(() => cn('text-lg font-semibold text-foreground', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
172
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SheetTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
173
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: SheetTitleComponent, isStandalone: true, selector: "ui-sheet-title, ui-drawer-title, h2[ui-sheet-title], h2[ui-drawer-title]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
174
|
+
}
|
|
175
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SheetTitleComponent, decorators: [{
|
|
176
|
+
type: Component,
|
|
177
|
+
args: [{
|
|
178
|
+
selector: 'ui-sheet-title, ui-drawer-title, h2[ui-sheet-title], h2[ui-drawer-title]',
|
|
179
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
180
|
+
host: { '[class]': 'classes()' },
|
|
181
|
+
template: `<ng-content />`,
|
|
182
|
+
}]
|
|
183
|
+
}], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
184
|
+
class SheetDescriptionComponent {
|
|
185
|
+
class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
186
|
+
classes = computed(() => cn('text-sm text-muted-foreground', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
187
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SheetDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
188
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: SheetDescriptionComponent, isStandalone: true, selector: "ui-sheet-description, ui-drawer-description, p[ui-sheet-description], p[ui-drawer-description]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
189
|
+
}
|
|
190
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SheetDescriptionComponent, decorators: [{
|
|
191
|
+
type: Component,
|
|
192
|
+
args: [{
|
|
193
|
+
selector: 'ui-sheet-description, ui-drawer-description, p[ui-sheet-description], p[ui-drawer-description]',
|
|
194
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
195
|
+
host: { '[class]': 'classes()' },
|
|
196
|
+
template: `<ng-content />`,
|
|
197
|
+
}]
|
|
198
|
+
}], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
199
|
+
class SheetContentComponent {
|
|
200
|
+
class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
201
|
+
classes = computed(() => cn('flex-1 overflow-auto', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
202
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SheetContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
203
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: SheetContentComponent, isStandalone: true, selector: "ui-sheet-content, ui-drawer-content", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
204
|
+
}
|
|
205
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SheetContentComponent, decorators: [{
|
|
206
|
+
type: Component,
|
|
207
|
+
args: [{
|
|
208
|
+
selector: 'ui-sheet-content, ui-drawer-content',
|
|
209
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
210
|
+
host: { '[class]': 'classes()' },
|
|
211
|
+
template: `<ng-content />`,
|
|
212
|
+
}]
|
|
213
|
+
}], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
214
|
+
class SheetFooterComponent {
|
|
215
|
+
class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
216
|
+
classes = computed(() => cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
217
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SheetFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
218
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: SheetFooterComponent, isStandalone: true, selector: "ui-sheet-footer, ui-drawer-footer", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
219
|
+
}
|
|
220
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SheetFooterComponent, decorators: [{
|
|
221
|
+
type: Component,
|
|
222
|
+
args: [{
|
|
223
|
+
selector: 'ui-sheet-footer, ui-drawer-footer',
|
|
224
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
225
|
+
host: { '[class]': 'classes()' },
|
|
226
|
+
template: `<ng-content />`,
|
|
227
|
+
}]
|
|
228
|
+
}], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
229
|
+
|
|
230
|
+
/**
|
|
231
|
+
* Generated bundle index. Do not edit.
|
|
232
|
+
*/
|
|
233
|
+
|
|
234
|
+
export { SheetCloseDirective, SheetComponent, SheetContentComponent, SheetDescriptionComponent, SheetFooterComponent, SheetHeaderComponent, SheetTitleComponent };
|
|
235
|
+
//# sourceMappingURL=ojiepermana-angular-ui-component-sheet.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ojiepermana-angular-ui-component-sheet.mjs","sources":["../../../projects/angular/ui/component/sheet/src/lib/sheet.component.ts","../../../projects/angular/ui/component/sheet/src/lib/sheet-close.directive.ts","../../../projects/angular/ui/component/sheet/src/lib/sheet-parts.component.ts","../../../projects/angular/ui/component/sheet/ojiepermana-angular-ui-component-sheet.ts"],"sourcesContent":["import { Overlay, OverlayRef } from '@angular/cdk/overlay';\nimport { TemplatePortal } from '@angular/cdk/portal';\nimport { FocusTrap, FocusTrapFactory } from '@angular/cdk/a11y';\nimport { DOCUMENT } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n DestroyRef,\n ElementRef,\n TemplateRef,\n ViewContainerRef,\n computed,\n effect,\n inject,\n input,\n model,\n output,\n viewChild,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { filter } from 'rxjs/operators';\nimport { cn } from '@ojiepermana/angular/component/utils';\n\nexport type SheetSide = 'top' | 'right' | 'bottom' | 'left';\n\nconst SIDE_BASE: Record<SheetSide, string> = {\n top: 'inset-x-0 top-0 border-b border-border',\n bottom: 'inset-x-0 bottom-0 border-t border-border',\n left: 'inset-y-0 left-0 h-full w-3/4 border-r border-border sm:max-w-sm',\n right: 'inset-y-0 right-0 h-full w-3/4 border-l border-border sm:max-w-sm',\n};\n\nconst DRAWER_SIDE_CLASSES: Record<SheetSide, string> = {\n top: 'max-h-[85vh] rounded-b-lg',\n bottom: 'max-h-[85vh] rounded-t-lg',\n left: 'rounded-r-lg',\n right: 'rounded-l-lg',\n};\n\nconst SIDE_ENTER_FROM: Record<SheetSide, string> = {\n top: 'translateY(-100%)',\n bottom: 'translateY(100%)',\n left: 'translateX(-100%)',\n right: 'translateX(100%)',\n};\n\n@Component({\n selector: 'ui-sheet, ui-drawer',\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n <ng-template #tpl>\n <div\n class=\"ui-sheet-surface fixed z-50 bg-background shadow-lg transition ease-in-out\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"labelledBy()\"\n [attr.aria-describedby]=\"describedBy()\"\n [class]=\"surfaceClasses()\"\n [style.--ui-sheet-from]=\"enterFrom()\">\n <ng-content />\n </div>\n </ng-template>\n `,\n styles: [\n `\n .ui-sheet-surface {\n animation: ui-sheet-in 300ms cubic-bezier(0.2, 0, 0, 1);\n }\n @keyframes ui-sheet-in {\n from {\n transform: var(--ui-sheet-from);\n }\n to {\n transform: translate(0, 0);\n }\n }\n @media (prefers-reduced-motion: reduce) {\n .ui-sheet-surface {\n animation-duration: 0ms;\n }\n }\n `,\n ],\n})\nexport class SheetComponent {\n private readonly overlay = inject(Overlay);\n private readonly vcr = inject(ViewContainerRef);\n private readonly trapFactory = inject(FocusTrapFactory);\n private readonly doc = inject(DOCUMENT);\n private readonly destroyRef = inject(DestroyRef);\n private readonly host = inject(ElementRef<HTMLElement>);\n\n readonly open = model<boolean>(false);\n readonly side = input<SheetSide | undefined>(undefined);\n readonly closeOnEscape = input<boolean>(true);\n readonly closeOnBackdropClick = input<boolean>(true);\n readonly labelledBy = input<string | null>(null, { alias: 'aria-labelledby' });\n readonly describedBy = input<string | null>(null, { alias: 'aria-describedby' });\n readonly class = input<string>('');\n\n readonly openedChange = output<boolean>();\n\n private readonly tpl = viewChild.required<TemplateRef<unknown>>('tpl');\n private overlayRef: OverlayRef | null = null;\n private focusTrap: FocusTrap | null = null;\n private previousFocus: HTMLElement | null = null;\n\n private readonly resolvedSide = computed<SheetSide>(() => this.side() ?? (this.isDrawerHost() ? 'bottom' : 'right'));\n\n protected readonly surfaceClasses = computed(() =>\n cn(\n 'gap-4 p-6 flex flex-col',\n SIDE_BASE[this.resolvedSide()],\n this.isDrawerHost() ? DRAWER_SIDE_CLASSES[this.resolvedSide()] : '',\n this.class(),\n ),\n );\n\n protected readonly enterFrom = computed(() => SIDE_ENTER_FROM[this.resolvedSide()]);\n\n constructor() {\n effect(() => {\n this.open() ? this.attach() : this.detach();\n });\n }\n\n private attach(): void {\n if (this.overlayRef) return;\n this.previousFocus = this.doc.activeElement as HTMLElement | null;\n\n this.overlayRef = this.overlay.create({\n hasBackdrop: true,\n backdropClass: 'ui-dialog-backdrop',\n panelClass: 'ui-sheet-panel',\n scrollStrategy: this.overlay.scrollStrategies.block(),\n positionStrategy: this.overlay.position().global(),\n });\n\n const portal = new TemplatePortal(this.tpl(), this.vcr);\n this.overlayRef.attach(portal);\n\n this.focusTrap = this.trapFactory.create(this.overlayRef.hostElement);\n this.focusTrap.focusInitialElementWhenReady();\n\n if (this.closeOnBackdropClick()) {\n this.overlayRef\n .backdropClick()\n .pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe(() => this.open.set(false));\n }\n\n this.overlayRef\n .keydownEvents()\n .pipe(\n takeUntilDestroyed(this.destroyRef),\n filter((e) => e.key === 'Escape' && this.closeOnEscape()),\n )\n .subscribe((e) => {\n e.preventDefault();\n this.open.set(false);\n });\n\n this.openedChange.emit(true);\n }\n\n private detach(): void {\n if (!this.overlayRef) return;\n this.focusTrap?.destroy();\n this.focusTrap = null;\n this.overlayRef.dispose();\n this.overlayRef = null;\n this.previousFocus?.focus?.();\n this.openedChange.emit(false);\n }\n\n close(): void {\n this.open.set(false);\n }\n\n private isDrawerHost(): boolean {\n return this.host.nativeElement.localName === 'ui-drawer';\n }\n}\n","import { Directive, inject } from '@angular/core';\n\nimport { SheetComponent } from './sheet.component';\n\n@Directive({\n selector: 'button[ui-sheet-close], a[ui-sheet-close], button[ui-drawer-close], a[ui-drawer-close]',\n host: {\n '(click)': 'closeSheet()',\n },\n})\nexport class SheetCloseDirective {\n private readonly sheet = inject(SheetComponent);\n\n closeSheet(): void {\n this.sheet.close();\n }\n}\n","import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { cn } from '@ojiepermana/angular/component/utils';\n\n@Component({\n selector: 'ui-sheet-header, ui-drawer-header',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { '[class]': 'classes()' },\n template: `<ng-content />`,\n})\nexport class SheetHeaderComponent {\n readonly class = input<string>('');\n protected readonly classes = computed(() => cn('flex flex-col gap-2 text-center sm:text-left', this.class()));\n}\n\n@Component({\n selector: 'ui-sheet-title, ui-drawer-title, h2[ui-sheet-title], h2[ui-drawer-title]',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { '[class]': 'classes()' },\n template: `<ng-content />`,\n})\nexport class SheetTitleComponent {\n readonly class = input<string>('');\n protected readonly classes = computed(() => cn('text-lg font-semibold text-foreground', this.class()));\n}\n\n@Component({\n selector: 'ui-sheet-description, ui-drawer-description, p[ui-sheet-description], p[ui-drawer-description]',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { '[class]': 'classes()' },\n template: `<ng-content />`,\n})\nexport class SheetDescriptionComponent {\n readonly class = input<string>('');\n protected readonly classes = computed(() => cn('text-sm text-muted-foreground', this.class()));\n}\n\n@Component({\n selector: 'ui-sheet-content, ui-drawer-content',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { '[class]': 'classes()' },\n template: `<ng-content />`,\n})\nexport class SheetContentComponent {\n readonly class = input<string>('');\n protected readonly classes = computed(() => cn('flex-1 overflow-auto', this.class()));\n}\n\n@Component({\n selector: 'ui-sheet-footer, ui-drawer-footer',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { '[class]': 'classes()' },\n template: `<ng-content />`,\n})\nexport class SheetFooterComponent {\n readonly class = input<string>('');\n protected readonly classes = computed(() =>\n cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', this.class()),\n );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import { cn } from '@ojiepermana/angular/component/utils';
|
|
4
|
+
|
|
5
|
+
class SkeletonComponent {
|
|
6
|
+
class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
7
|
+
classes = computed(() => cn('block animate-pulse rounded-md bg-muted', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
8
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: SkeletonComponent, isStandalone: true, selector: "ui-skeleton", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.aria-hidden": "\"true\"" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10
|
+
}
|
|
11
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SkeletonComponent, decorators: [{
|
|
12
|
+
type: Component,
|
|
13
|
+
args: [{
|
|
14
|
+
selector: 'ui-skeleton',
|
|
15
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
16
|
+
host: {
|
|
17
|
+
'[class]': 'classes()',
|
|
18
|
+
'[attr.aria-hidden]': '"true"',
|
|
19
|
+
},
|
|
20
|
+
template: '',
|
|
21
|
+
}]
|
|
22
|
+
}], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* Generated bundle index. Do not edit.
|
|
26
|
+
*/
|
|
27
|
+
|
|
28
|
+
export { SkeletonComponent };
|
|
29
|
+
//# sourceMappingURL=ojiepermana-angular-ui-component-skeleton.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ojiepermana-angular-ui-component-skeleton.mjs","sources":["../../../projects/angular/ui/component/skeleton/src/lib/skeleton.component.ts","../../../projects/angular/ui/component/skeleton/ojiepermana-angular-ui-component-skeleton.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { cn } from '@ojiepermana/angular/component/utils';\n\n@Component({\n selector: 'ui-skeleton',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[class]': 'classes()',\n '[attr.aria-hidden]': '\"true\"',\n },\n template: '',\n})\nexport class SkeletonComponent {\n readonly class = input<string>('');\n\n protected readonly classes = computed(() => cn('block animate-pulse rounded-md bg-muted', this.class()));\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MAYa,iBAAiB,CAAA;AACnB,IAAA,KAAK,GAAG,KAAK,CAAS,EAAE,4EAAC;AAEf,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,yCAAyC,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,8EAAC;wGAH7F,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,iBAAiB,2RAFlB,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAED,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAT7B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,aAAa;oBACvB,eAAe,EAAE,uBAAuB,CAAC,MAAM;AAC/C,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE,WAAW;AACtB,wBAAA,oBAAoB,EAAE,QAAQ;AAC/B,qBAAA;AACD,oBAAA,QAAQ,EAAE,EAAE;AACb,iBAAA;;;ACXD;;AAEG;;;;"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { inject, ElementRef, input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import { cn } from '@ojiepermana/angular/component/utils';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Styled native range input. Works with `ngModel` / `FormControl` via
|
|
7
|
+
* Angular's built-in `RangeValueAccessor`. Keyboard + ARIA handled by the browser.
|
|
8
|
+
*/
|
|
9
|
+
class SliderComponent {
|
|
10
|
+
el = inject(ElementRef);
|
|
11
|
+
class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
12
|
+
classes = computed(() => cn('ui-slider relative w-full appearance-none bg-transparent', 'focus-visible:outline-none', 'disabled:pointer-events-none disabled:opacity-50', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
13
|
+
focus() {
|
|
14
|
+
this.el.nativeElement.focus();
|
|
15
|
+
}
|
|
16
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
17
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: SliderComponent, isStandalone: true, selector: "input[type=range][ui-slider]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '', isInline: true, styles: [":host.ui-slider{height:1.25rem;cursor:pointer}:host.ui-slider::-webkit-slider-runnable-track{height:.5rem;border-radius:var(--radius-lg);background:hsl(var(--secondary))}:host.ui-slider::-moz-range-track{height:.5rem;border-radius:var(--radius-lg);background:hsl(var(--secondary))}:host.ui-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-.25rem;width:1rem;height:1rem;border-radius:var(--radius-lg);background:hsl(var(--background));border:var(--border-width) solid hsl(var(--primary));transition:box-shadow .15s cubic-bezier(.4,0,.2,1)}:host.ui-slider::-moz-range-thumb{width:1rem;height:1rem;border-radius:var(--radius-lg);background:hsl(var(--background));border:var(--border-width) solid hsl(var(--primary));transition:box-shadow .15s cubic-bezier(.4,0,.2,1)}:host.ui-slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 calc(var(--border-width) + 3px) hsl(var(--ring) / .3)}:host.ui-slider:focus-visible::-moz-range-thumb{box-shadow:0 0 0 calc(var(--border-width) + 3px) hsl(var(--ring) / .3)}:host.ui-slider:disabled::-webkit-slider-thumb{cursor:not-allowed}:host.ui-slider:disabled::-moz-range-thumb{cursor:not-allowed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
18
|
+
}
|
|
19
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SliderComponent, decorators: [{
|
|
20
|
+
type: Component,
|
|
21
|
+
args: [{ selector: 'input[type=range][ui-slider]', changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class]': 'classes()' }, template: '', styles: [":host.ui-slider{height:1.25rem;cursor:pointer}:host.ui-slider::-webkit-slider-runnable-track{height:.5rem;border-radius:var(--radius-lg);background:hsl(var(--secondary))}:host.ui-slider::-moz-range-track{height:.5rem;border-radius:var(--radius-lg);background:hsl(var(--secondary))}:host.ui-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-.25rem;width:1rem;height:1rem;border-radius:var(--radius-lg);background:hsl(var(--background));border:var(--border-width) solid hsl(var(--primary));transition:box-shadow .15s cubic-bezier(.4,0,.2,1)}:host.ui-slider::-moz-range-thumb{width:1rem;height:1rem;border-radius:var(--radius-lg);background:hsl(var(--background));border:var(--border-width) solid hsl(var(--primary));transition:box-shadow .15s cubic-bezier(.4,0,.2,1)}:host.ui-slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 calc(var(--border-width) + 3px) hsl(var(--ring) / .3)}:host.ui-slider:focus-visible::-moz-range-thumb{box-shadow:0 0 0 calc(var(--border-width) + 3px) hsl(var(--ring) / .3)}:host.ui-slider:disabled::-webkit-slider-thumb{cursor:not-allowed}:host.ui-slider:disabled::-moz-range-thumb{cursor:not-allowed}\n"] }]
|
|
22
|
+
}], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* Generated bundle index. Do not edit.
|
|
26
|
+
*/
|
|
27
|
+
|
|
28
|
+
export { SliderComponent };
|
|
29
|
+
//# sourceMappingURL=ojiepermana-angular-ui-component-slider.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ojiepermana-angular-ui-component-slider.mjs","sources":["../../../projects/angular/ui/component/slider/src/lib/slider.component.ts","../../../projects/angular/ui/component/slider/ojiepermana-angular-ui-component-slider.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ElementRef, computed, inject, input } from '@angular/core';\nimport { cn } from '@ojiepermana/angular/component/utils';\n\n/**\n * Styled native range input. Works with `ngModel` / `FormControl` via\n * Angular's built-in `RangeValueAccessor`. Keyboard + ARIA handled by the browser.\n */\n@Component({\n selector: 'input[type=range][ui-slider]',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { '[class]': 'classes()' },\n template: '',\n styleUrl: './slider.component.css',\n})\nexport class SliderComponent {\n private readonly el = inject<ElementRef<HTMLInputElement>>(ElementRef);\n readonly class = input<string>('');\n\n protected readonly classes = computed(() =>\n cn(\n 'ui-slider relative w-full appearance-none bg-transparent',\n 'focus-visible:outline-none',\n 'disabled:pointer-events-none disabled:opacity-50',\n this.class(),\n ),\n );\n\n focus(): void {\n this.el.nativeElement.focus();\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;AAGA;;;AAGG;MAQU,eAAe,CAAA;AACT,IAAA,EAAE,GAAG,MAAM,CAA+B,UAAU,CAAC;AAC7D,IAAA,KAAK,GAAG,KAAK,CAAS,EAAE,4EAAC;IAEf,OAAO,GAAG,QAAQ,CAAC,MACpC,EAAE,CACA,0DAA0D,EAC1D,4BAA4B,EAC5B,kDAAkD,EAClD,IAAI,CAAC,KAAK,EAAE,CACb,8EACF;IAED,KAAK,GAAA;AACH,QAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,KAAK,EAAE;IAC/B;wGAfW,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAf,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,eAAe,4QAHhB,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,kpCAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAGD,eAAe,EAAA,UAAA,EAAA,CAAA;kBAP3B,SAAS;+BACE,8BAA8B,EAAA,eAAA,EACvB,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC,EAAE,SAAS,EAAE,WAAW,EAAE,EAAA,QAAA,EACtB,EAAE,EAAA,MAAA,EAAA,CAAA,kpCAAA,CAAA,EAAA;;;ACXd;;AAEG;;;;"}
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { input, output, viewChild, signal, computed, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
4
|
+
import { MatSlideToggle } from '@angular/material/slide-toggle';
|
|
5
|
+
import { cn } from '@ojiepermana/angular/component/utils';
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Switch — shadcn-styled wrapper around `mat-slide-toggle`.
|
|
9
|
+
*/
|
|
10
|
+
class SwitchComponent {
|
|
11
|
+
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
12
|
+
ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
|
|
13
|
+
ariaLabelledby = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
|
|
14
|
+
class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
15
|
+
checkedChange = output();
|
|
16
|
+
ref = viewChild.required('ref');
|
|
17
|
+
checked = signal(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
|
|
18
|
+
disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
19
|
+
classes = computed(() => cn('ui-switch', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
20
|
+
onChange = () => { };
|
|
21
|
+
onTouched = () => { };
|
|
22
|
+
handleChange(e) {
|
|
23
|
+
this.checked.set(e.checked);
|
|
24
|
+
this.onChange(e.checked);
|
|
25
|
+
this.onTouched();
|
|
26
|
+
this.checkedChange.emit(e.checked);
|
|
27
|
+
}
|
|
28
|
+
focus() {
|
|
29
|
+
this.ref().focus();
|
|
30
|
+
}
|
|
31
|
+
writeValue(v) {
|
|
32
|
+
this.checked.set(!!v);
|
|
33
|
+
}
|
|
34
|
+
registerOnChange(fn) {
|
|
35
|
+
this.onChange = fn;
|
|
36
|
+
}
|
|
37
|
+
registerOnTouched(fn) {
|
|
38
|
+
this.onTouched = fn;
|
|
39
|
+
}
|
|
40
|
+
setDisabledState(d) {
|
|
41
|
+
this.disabled.set(d);
|
|
42
|
+
}
|
|
43
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
44
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.14", type: SwitchComponent, isStandalone: true, selector: "ui-switch", inputs: { required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SwitchComponent), multi: true }], viewQueries: [{ propertyName: "ref", first: true, predicate: ["ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
45
|
+
<mat-slide-toggle
|
|
46
|
+
#ref
|
|
47
|
+
hideIcon
|
|
48
|
+
disableRipple
|
|
49
|
+
[class]="classes()"
|
|
50
|
+
[checked]="checked()"
|
|
51
|
+
[disabled]="disabled()"
|
|
52
|
+
[required]="required()"
|
|
53
|
+
[attr.aria-label]="ariaLabel()"
|
|
54
|
+
[attr.aria-labelledby]="ariaLabelledby()"
|
|
55
|
+
(change)="handleChange($event)">
|
|
56
|
+
<ng-content />
|
|
57
|
+
</mat-slide-toggle>
|
|
58
|
+
`, isInline: true, styles: [":host{display:inline-flex}:host ::ng-deep .mat-mdc-slide-toggle{--mdc-switch-track-width: 2rem;--mdc-switch-track-height: 1.15rem;--mdc-switch-track-shape: 9999px;--mdc-switch-handle-shape: 9999px;--mdc-switch-handle-width: .875rem;--mdc-switch-handle-height: .875rem;--mdc-switch-state-layer-size: 0;--mdc-switch-selected-track-color: hsl(var(--primary));--mdc-switch-selected-focus-track-color: hsl(var(--primary));--mdc-switch-selected-hover-track-color: hsl(var(--primary));--mdc-switch-selected-pressed-track-color: hsl(var(--primary));--mdc-switch-unselected-track-color: hsl(var(--input));--mdc-switch-unselected-focus-track-color: hsl(var(--input));--mdc-switch-unselected-hover-track-color: hsl(var(--input));--mdc-switch-unselected-pressed-track-color: hsl(var(--input));--mdc-switch-selected-handle-color: hsl(var(--primary-foreground));--mdc-switch-selected-focus-handle-color: hsl(var(--primary-foreground));--mdc-switch-selected-hover-handle-color: hsl(var(--primary-foreground));--mdc-switch-selected-pressed-handle-color: hsl(var(--primary-foreground));--mdc-switch-unselected-handle-color: hsl(var(--background));--mdc-switch-unselected-focus-handle-color: hsl(var(--background));--mdc-switch-unselected-hover-handle-color: hsl(var(--background));--mdc-switch-unselected-pressed-handle-color: hsl(var(--background));--mdc-switch-selected-icon-color: transparent;--mdc-switch-unselected-icon-color: transparent}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch__ripple,:host ::ng-deep .mat-mdc-slide-toggle .mat-mdc-slide-toggle-ripple,:host ::ng-deep .mat-mdc-slide-toggle .mat-mdc-focus-indicator{display:none}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch__icons{display:none}:host ::ng-deep .mat-mdc-slide-toggle .mdc-form-field{gap:.5rem;color:hsl(var(--foreground));font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--text-sm--line-height)}:host ::ng-deep .mat-mdc-slide-toggle .mdc-label{padding:0;cursor:pointer}\n"], dependencies: [{ kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
59
|
+
}
|
|
60
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SwitchComponent, decorators: [{
|
|
61
|
+
type: Component,
|
|
62
|
+
args: [{ selector: 'ui-switch', imports: [MatSlideToggle], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SwitchComponent), multi: true }], template: `
|
|
63
|
+
<mat-slide-toggle
|
|
64
|
+
#ref
|
|
65
|
+
hideIcon
|
|
66
|
+
disableRipple
|
|
67
|
+
[class]="classes()"
|
|
68
|
+
[checked]="checked()"
|
|
69
|
+
[disabled]="disabled()"
|
|
70
|
+
[required]="required()"
|
|
71
|
+
[attr.aria-label]="ariaLabel()"
|
|
72
|
+
[attr.aria-labelledby]="ariaLabelledby()"
|
|
73
|
+
(change)="handleChange($event)">
|
|
74
|
+
<ng-content />
|
|
75
|
+
</mat-slide-toggle>
|
|
76
|
+
`, styles: [":host{display:inline-flex}:host ::ng-deep .mat-mdc-slide-toggle{--mdc-switch-track-width: 2rem;--mdc-switch-track-height: 1.15rem;--mdc-switch-track-shape: 9999px;--mdc-switch-handle-shape: 9999px;--mdc-switch-handle-width: .875rem;--mdc-switch-handle-height: .875rem;--mdc-switch-state-layer-size: 0;--mdc-switch-selected-track-color: hsl(var(--primary));--mdc-switch-selected-focus-track-color: hsl(var(--primary));--mdc-switch-selected-hover-track-color: hsl(var(--primary));--mdc-switch-selected-pressed-track-color: hsl(var(--primary));--mdc-switch-unselected-track-color: hsl(var(--input));--mdc-switch-unselected-focus-track-color: hsl(var(--input));--mdc-switch-unselected-hover-track-color: hsl(var(--input));--mdc-switch-unselected-pressed-track-color: hsl(var(--input));--mdc-switch-selected-handle-color: hsl(var(--primary-foreground));--mdc-switch-selected-focus-handle-color: hsl(var(--primary-foreground));--mdc-switch-selected-hover-handle-color: hsl(var(--primary-foreground));--mdc-switch-selected-pressed-handle-color: hsl(var(--primary-foreground));--mdc-switch-unselected-handle-color: hsl(var(--background));--mdc-switch-unselected-focus-handle-color: hsl(var(--background));--mdc-switch-unselected-hover-handle-color: hsl(var(--background));--mdc-switch-unselected-pressed-handle-color: hsl(var(--background));--mdc-switch-selected-icon-color: transparent;--mdc-switch-unselected-icon-color: transparent}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch__ripple,:host ::ng-deep .mat-mdc-slide-toggle .mat-mdc-slide-toggle-ripple,:host ::ng-deep .mat-mdc-slide-toggle .mat-mdc-focus-indicator{display:none}:host ::ng-deep .mat-mdc-slide-toggle .mdc-switch__icons{display:none}:host ::ng-deep .mat-mdc-slide-toggle .mdc-form-field{gap:.5rem;color:hsl(var(--foreground));font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--text-sm--line-height)}:host ::ng-deep .mat-mdc-slide-toggle .mdc-label{padding:0;cursor:pointer}\n"] }]
|
|
77
|
+
}], propDecorators: { required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }], ref: [{ type: i0.ViewChild, args: ['ref', { isSignal: true }] }] } });
|
|
78
|
+
|
|
79
|
+
/**
|
|
80
|
+
* Generated bundle index. Do not edit.
|
|
81
|
+
*/
|
|
82
|
+
|
|
83
|
+
export { SwitchComponent };
|
|
84
|
+
//# sourceMappingURL=ojiepermana-angular-ui-component-switch.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ojiepermana-angular-ui-component-switch.mjs","sources":["../../../projects/angular/ui/component/switch/src/lib/switch.component.ts","../../../projects/angular/ui/component/switch/ojiepermana-angular-ui-component-switch.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n computed,\n forwardRef,\n input,\n output,\n signal,\n viewChild,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { MatSlideToggle, MatSlideToggleChange } from '@angular/material/slide-toggle';\nimport { cn } from '@ojiepermana/angular/component/utils';\n\n/**\n * Switch — shadcn-styled wrapper around `mat-slide-toggle`.\n */\n@Component({\n selector: 'ui-switch',\n imports: [MatSlideToggle],\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SwitchComponent), multi: true }],\n template: `\n <mat-slide-toggle\n #ref\n hideIcon\n disableRipple\n [class]=\"classes()\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledby()\"\n (change)=\"handleChange($event)\">\n <ng-content />\n </mat-slide-toggle>\n `,\n styleUrl: './switch.component.css',\n})\nexport class SwitchComponent implements ControlValueAccessor {\n readonly required = input<boolean>(false);\n readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });\n readonly ariaLabelledby = input<string | null>(null, { alias: 'aria-labelledby' });\n readonly class = input<string>('');\n\n readonly checkedChange = output<boolean>();\n\n private readonly ref = viewChild.required<MatSlideToggle>('ref');\n\n protected readonly checked = signal<boolean>(false);\n protected readonly disabled = signal<boolean>(false);\n protected readonly classes = computed(() => cn('ui-switch', this.class()));\n\n private onChange: (v: boolean) => void = () => {};\n private onTouched: () => void = () => {};\n\n protected handleChange(e: MatSlideToggleChange): void {\n this.checked.set(e.checked);\n this.onChange(e.checked);\n this.onTouched();\n this.checkedChange.emit(e.checked);\n }\n\n focus(): void {\n this.ref().focus();\n }\n\n writeValue(v: boolean): void {\n this.checked.set(!!v);\n }\n registerOnChange(fn: (v: boolean) => void): void {\n this.onChange = fn;\n }\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n setDisabledState(d: boolean): void {\n this.disabled.set(d);\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|