{"id":21721661,"url":"https://github.com/polydile/dile-confirm","last_synced_at":"2025-07-18T17:30:39.443Z","repository":{"id":34933211,"uuid":"192499899","full_name":"Polydile/dile-confirm","owner":"Polydile","description":"Web component to create a confirm dialog (Accept / Cancel), based on LitElement","archived":true,"fork":false,"pushed_at":"2025-02-19T18:33:29.000Z","size":2304,"stargazers_count":4,"open_issues_count":23,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-03T03:48:49.124Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://dile-confirm.polydile.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Polydile.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-06-18T08:37:27.000Z","updated_at":"2025-02-19T18:34:12.000Z","dependencies_parsed_at":"2023-01-15T10:42:44.170Z","dependency_job_id":null,"html_url":"https://github.com/Polydile/dile-confirm","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/Polydile/dile-confirm","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polydile%2Fdile-confirm","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polydile%2Fdile-confirm/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polydile%2Fdile-confirm/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polydile%2Fdile-confirm/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Polydile","download_url":"https://codeload.github.com/Polydile/dile-confirm/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polydile%2Fdile-confirm/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265801585,"owners_count":23830438,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-26T02:18:23.691Z","updated_at":"2025-07-18T17:30:39.410Z","avatar_url":"https://github.com/Polydile.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Moved!\n\n**This package has moved** and is now available at [@dile/ui](https://github.com/Polydile/dile-components). Please update your dependencies. This repository is no longer maintained. You can read the documentation at [Dile Components](https://dile-components.com/).\n\n# dile-confirm\n\nThis is a Web Component to implement a modal confirm box, based on LitElement.\n\nLet's [go to DEMOS page](https://dile-confirm.polydile.com)!\n\n# Use\n\nInstall it from npm:\n\n```\nnpm i dile-confirm\n```\n\nPlace the script In your HTML page or include the dile-confirm.js file in your JS bundle. After that you can use the dile-confirm tag, like this:\n\n```\n\u003cdile-confirm id=\"myModal\"\u003e\n  \u003cp\u003e\n    Delete this file?\n  \u003c/p\u003e\n\u003c/dile-confirm\u003e \n```\n\nWhatever you place inside the ```\u003cdile-confirm\u003e``` tag will be the content displayed when the modal box opens. \n\nIn addition, the confirm box display two buttons inside the modal interface: \n\n- Cancel button: pressing it, the confirm box closes and dispatchs the dile-confirm-cancelled event\n- Accept button: pressing it, the confirm box closes and dispatchs the dile-confirm-accepted event\n\n## Properties\n\n- **opened**: Bolean property used to change the confirm modal state, false is closed / true means open.\n- **cancelLabel**: The text to the cancel button.\n- **acceptLabel**: The text to the accept button.\n- **blocking**: Click on the background layer do not closes the confirm box.\n\n## Methods\n\n- **open**: Use it to open the modal confirm box\n- **close**: Use it to close the modal confirm box\n- **accept**: Closes the modal box and dispatch dile-confirm-accepted event\n- **cancel**: Closes the modal box and dispatch dile-confirm-cancelled event\n\n## Custom events\n\n- **dile-confirm-cancelled**: Dispatched when the confirm box is cancelled. This occurs when the user press the cancel button or closes the modal box cliking outside.\n- **dile-confirm-accepted**: Dispatched when the confirm box is accepted. This occurs when the user press the accept button.\n\n## Style customization\n\nThese are the dile-confirm CSS custom properties. (But remember, you can customize the modal box interface also by using the CSS custom properties of the [dile-modal component](https://github.com/Polydile/dile-modal))\n\nCustom property | Description | Default\n----------------|-------------|---------\n--dile-confirm-accept-button-color | Accept button background color | #007bff\n--dile-confirm-cancel-button-color | Cancel button background color | #dc3545\n--dile-confirm-accept-text-button-color | Accept button text color | #fff\n--dile-confirm-cancel-text-button-color | Cancel button text color | #fff\n--dile-confirm-border-radius-button | Button border radius | 5px\n--dile-confirm-padding-button | Button padding | 7px\n--dile-confirm-font-size-button | Button font size | 1em\n--dile-confirm-buttons-text-align | Buttons element text align | right\n--dile-confirm-text-transform  | Button text transformation | uppercase\n--dile-confirm-buttons-margin-top | Confirm buttons section margin-top | 10px\n--dile-confirm-buttons-margin-bottom | Confirm buttons section margin-bottom | 10px\n--dile-confirm-buttons-margin-left | Confirm buttons section margin-left | 0\n--dile-confirm-buttons-margin-right | Confirm buttons section margin-right | 0\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolydile%2Fdile-confirm","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpolydile%2Fdile-confirm","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolydile%2Fdile-confirm/lists"}