@akcelik/strct 0.9.1 → 0.10.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.
|
@@ -2224,8 +2224,13 @@ class StrctModal {
|
|
|
2224
2224
|
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
2225
2225
|
/** Hide the footer slot. */
|
|
2226
2226
|
hideFooter = input(false, { ...(ngDevMode ? { debugName: "hideFooter" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2227
|
-
/**
|
|
2228
|
-
|
|
2227
|
+
/**
|
|
2228
|
+
* Allow closing via a backdrop click / the Escape key. **Off by default** —
|
|
2229
|
+
* a modal closes only through its X button or an explicit action button, so a
|
|
2230
|
+
* stray click outside (or Escape) never discards in-progress work. Set
|
|
2231
|
+
* `dismissible` for lightweight, transient dialogs where quick dismissal is fine.
|
|
2232
|
+
*/
|
|
2233
|
+
dismissible = input(false, { ...(ngDevMode ? { debugName: "dismissible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2229
2234
|
/** Emitted when the alert is dismissed. */
|
|
2230
2235
|
closed = output();
|
|
2231
2236
|
titleId = `strct-modal-${++modalCounter}`;
|
|
@@ -2318,9 +2323,7 @@ class StrctModal {
|
|
|
2318
2323
|
>
|
|
2319
2324
|
<div
|
|
2320
2325
|
#dialog
|
|
2321
|
-
class="strct-modal__dialog"
|
|
2322
|
-
[class.strct-modal__dialog--sm]="size() === 'sm'"
|
|
2323
|
-
[class.strct-modal__dialog--lg]="size() === 'lg'"
|
|
2326
|
+
class="strct-modal__dialog strct-modal__dialog--{{ size() }}"
|
|
2324
2327
|
role="dialog"
|
|
2325
2328
|
aria-modal="true"
|
|
2326
2329
|
[attr.aria-labelledby]="title() ? titleId : null"
|
|
@@ -2342,7 +2345,7 @@ class StrctModal {
|
|
|
2342
2345
|
</div>
|
|
2343
2346
|
</div>
|
|
2344
2347
|
}
|
|
2345
|
-
`, isInline: true, styles: [".strct-modal__overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--space-5);background:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:strct-modal-fade .12s ease}@media(max-width:768px){.strct-modal__overlay{padding:var(--space-3)}}.strct-modal__dialog{width:100%;max-
|
|
2348
|
+
`, isInline: true, styles: [".strct-modal__overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--space-5);background:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:strct-modal-fade .12s ease}@media(max-width:768px){.strct-modal__overlay{padding:var(--space-3)}}.strct-modal__dialog{width:100%;max-height:calc(100vh - 48px);display:flex;flex-direction:column;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-xl);box-shadow:var(--shadow-elevated);overflow:hidden;animation:strct-modal-rise .14s ease}.strct-modal__dialog--sm{max-width:min(380px,calc(100vw - 32px))}.strct-modal__dialog--md{max-width:min(480px,calc(100vw - 32px))}.strct-modal__dialog--lg{max-width:min(640px,calc(100vw - 32px))}.strct-modal__dialog--xl{max-width:min(860px,calc(100vw - 32px))}.strct-modal__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--b1)}.strct-modal__title{font-size:14px;font-weight:600;color:var(--t1)}.strct-modal__close{display:inline-flex;padding:4px;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer}.strct-modal__close:hover{color:var(--t1);background:var(--bg-3)}.strct-modal__body{padding:var(--space-4);overflow-y:auto;color:var(--t2);font-size:13px}.strct-modal__foot{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-top:1px solid var(--b1);background:var(--bg-2)}@keyframes strct-modal-fade{0%{opacity:0}}@keyframes strct-modal-rise{0%{opacity:0;transform:translateY(8px) scale(.98)}}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2346
2349
|
}
|
|
2347
2350
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctModal, decorators: [{
|
|
2348
2351
|
type: Component,
|
|
@@ -2358,9 +2361,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
|
|
|
2358
2361
|
>
|
|
2359
2362
|
<div
|
|
2360
2363
|
#dialog
|
|
2361
|
-
class="strct-modal__dialog"
|
|
2362
|
-
[class.strct-modal__dialog--sm]="size() === 'sm'"
|
|
2363
|
-
[class.strct-modal__dialog--lg]="size() === 'lg'"
|
|
2364
|
+
class="strct-modal__dialog strct-modal__dialog--{{ size() }}"
|
|
2364
2365
|
role="dialog"
|
|
2365
2366
|
aria-modal="true"
|
|
2366
2367
|
[attr.aria-labelledby]="title() ? titleId : null"
|
|
@@ -2384,7 +2385,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
|
|
|
2384
2385
|
}
|
|
2385
2386
|
`, host: {
|
|
2386
2387
|
'(document:keydown.escape)': 'onEscape()',
|
|
2387
|
-
}, styles: [".strct-modal__overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--space-5);background:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:strct-modal-fade .12s ease}@media(max-width:768px){.strct-modal__overlay{padding:var(--space-3)}}.strct-modal__dialog{width:100%;max-
|
|
2388
|
+
}, styles: [".strct-modal__overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--space-5);background:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:strct-modal-fade .12s ease}@media(max-width:768px){.strct-modal__overlay{padding:var(--space-3)}}.strct-modal__dialog{width:100%;max-height:calc(100vh - 48px);display:flex;flex-direction:column;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-xl);box-shadow:var(--shadow-elevated);overflow:hidden;animation:strct-modal-rise .14s ease}.strct-modal__dialog--sm{max-width:min(380px,calc(100vw - 32px))}.strct-modal__dialog--md{max-width:min(480px,calc(100vw - 32px))}.strct-modal__dialog--lg{max-width:min(640px,calc(100vw - 32px))}.strct-modal__dialog--xl{max-width:min(860px,calc(100vw - 32px))}.strct-modal__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--b1)}.strct-modal__title{font-size:14px;font-weight:600;color:var(--t1)}.strct-modal__close{display:inline-flex;padding:4px;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer}.strct-modal__close:hover{color:var(--t1);background:var(--bg-3)}.strct-modal__body{padding:var(--space-4);overflow-y:auto;color:var(--t2);font-size:13px}.strct-modal__foot{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-top:1px solid var(--b1);background:var(--bg-2)}@keyframes strct-modal-fade{0%{opacity:0}}@keyframes strct-modal-rise{0%{opacity:0;transform:translateY(8px) scale(.98)}}\n"] }]
|
|
2388
2389
|
}], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hideFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideFooter", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
2389
2390
|
|
|
2390
2391
|
/** Marks the drawer's footer action area: `<ng-container strctDrawerFooter>…`. */
|